Give your agent a visual reference
AI agents are good at generating specific, familiar types of diagrams: a flowchart, a request sequence, a service map, or a code diff. Technical Diagrams gives you a visual reference for those forms, so you can show your agent what you mean.
Browse the examples, choose the form that fits your explanation, and give your agent the reference together with your system details. Each of the 32 entries includes an example you can inspect, editable source, usage guidance, and an initial editorial score.
The collection is a working baseline. It does not claim to enumerate every possible diagram or measure what every AI model can generate.
Choose by the question you need to answer
| Your reader asks | Start with |
|---|---|
| What connects to what? | Service architecture |
| What happens next? | Processing pipeline |
| Who sends which message? | Request sequence |
| Who owns each step? | Swimlanes |
| How does the data relate? | Entity relationship |
| Where did the time go? | Trace waterfall |
| What changed in the code? | Code diff |
| What command should I expect? | Terminal transcript |
Generate a diagram with your agent
- Choose a reference from the gallery and inspect its preview and usage guidance.
- Choose Copy agent prompt on the recipe page. It includes the reference URL, current scene, and settings.
- Paste the prompt into your agent with the code, architecture, data, or process you want to explain.
- Ask the agent to adapt the form, preserve the facts, and check the generated diagram at your website’s display width.
- Inspect the result. Keep its scene JSON alongside the SVG so you or your agent can revise it later.
Use your own agent, such as Codex, Claude Code, or a coding assistant in your editor. This website supplies the reference; it does not call a model or require an AI API key.
Tune a reference yourself
- Open a diagram from the gallery.
- Change its theme, accent, typography, line weight, or corner radius.
- Open Edit labels & content to replace the example text.
- Use Edit individual elements to move, add, duplicate, or remove shapes and connections. Edit scene JSON exposes the whole scene.
- Inspect it at the width where you plan to use it. View at full size gives small screens a scrollable preview.
- Download the SVG for your website and the JSON for future edits.
Edits remain in memory until you leave the page. Download JSON or copy a preset link to keep them. Reviews persist in this browser when local storage is available.
What you get
SVG: a self-contained vector image with editable text and accessibility title and description. It does not need this website or a framework at runtime.
JSON preset: the scene plus presentation settings. Import it on a recipe page to resume editing. The renderer only accepts the documented primitive vocabulary.
Preset link: your scene and settings in a URL fragment. Anyone receiving the link can read the included content. Avoid using it for private source code or credentials.
Developer surfaces are illustrations
The terminal, IDE, test report, and log examples display editable text. They do not execute commands, compile code, query a service, or report real system state. The examples label synthetic values and output as illustrative.
The platform
We use Astro and TypeScript to generate static documentation and gallery pages. Browser scripts handle editing, exports, and local reviews. The source is public on GitHub under the MIT License; Netlify hosts the site.
This keeps the reference pages available without client-side routing and gives each recipe its own URL. Astro supports static HTML with browser JavaScript for interactions. See Astro’s architecture documentation and Netlify’s deploy documentation.