Documentation
Examples — every diagram type and feature with its source, each one also live and zoomable.
Tutorials
Learn by doing.
| Your first diagram | Zero to a compiled, rendered, exported diagram in TypeScript. |
| Draw one in the browser | The same result by dragging AWS icons onto a canvas. |
How-to guides
Get something done.
| Author diagrams in TypeScript | Nodes, relations, styles, ER tables, metadata. |
| Use planes and layers | One model, several views: a second hierarchy, or an overlay. |
| Add a legend | An on-canvas key: derived rows, plus what only you can say. |
| Organise a large diagram | Semantic zoom, pins, drilling — and when to split instead. |
| Use the icon library | C4 stencils, the AWS, Azure and Google Cloud icon sets, importing your own. |
| Draw on a diagram | Freehand pen and eraser on top of the boxes. |
| Comment on a diagram | Remarks and resource links on any node or relation, read from the badge on the published page. |
| Draw a git branching diagram | Lanes of commits with branch-offs and merges, from the DSL or the studio. |
| Draw an activity diagram | Swimlanes, forks and joins, decisions, signals and interrupts. |
| Draw a C4 diagram | Solid person/system/container/component fills, and a technology subtitle. |
| Draw a second-order thinking diagram | A decision, its consequences, and what follows from those — banded by order. |
| Draw a fishbone diagram | An effect, the categories of cause, causes and sub-causes on their bones. |
| Draw a threat model | A STRIDE data-flow diagram whose elements and flows carry their own threat register. |
| Draw a deployment diagram | Environments, regions, zones, networks and subnets, and what runs inside them. |
| Draw a plan | A schedule: zones as date bars that nest, events, people as owner / executor / checker, and comments on any of them. |
| Draw an ER diagram | Tables with typed columns and keys, and foreign keys pinned row to row. |
| Draw a causal-loop diagram | Variables, signed links and delays — the reinforcing and balancing loops are found for you. |
| Compose diagrams | include and key: umbrella views over several diagrams. |
| Publish and share | PNGs for a README, interactive pages, GitHub Pages. |
| Show what changed | Before/after pictures between two git refs, for an ADR or a review. |
| Eject a diagram to TypeScript | Promote a studio-drawn diagram to a verified, generated .diagram.ts. |
| Place boxes on a generated diagram | Position a read-only .diagram.ts view without losing it on re-compile. |
| Change keyboard shortcuts | Give any studio action its own key, a second key, or none. |
Add diagc to an existing repository |
Install, diagc init, what to commit, editor types, diagc lint in CI. |
| Write diagrams with a coding agent | diagc init --agents, diagc guide, the lint loop, and a picture the agent can check. |
| Use the Obsidian plugin | Studio pane, diagram embeds and node-to-note links in a vault. |
Reference
Look it up.
diagc CLI |
Commands, flags, environment variables, which files to commit. |
| Model | Every field of a diagram, every validation code, registry defaults. |
| Glossary | The words the docs and the studio use, one or two sentences each. |
| Builder API | The TypeScript DSL, method by method. |
| Studio | Panels, gestures, shortcuts. |
| Library | The bundled C4, Tech, Kubernetes, AWS, Azure and Google Cloud packs. |
| Renderer registries and theme | Override shapes, line styles, icons and colours when you render DiagramView yourself, in a checkout. |
Explanation
Understand it.
| How a diagram becomes a picture | The pipeline, the packages, and why they are split that way. |
| What is in a model | The five decisions frozen into the data structure. |
| What you see is not what is stored | Semantic zoom, planes and layers — and how they interact. |