diagram
the explainer
a diagram is chosen by destination and fidelity, not by tool loyalty: inline in a markdown doc wants mermaid, an editable canvas the reader will keep touching wants excalidraw, a polished standalone artifact wants tech-graph, and a walkthrough of a file or a slide deck wants preview. pick the lightest format that satisfies the destination; escalate only when the reader needs interactivity or publish-grade polish.
one idea per pictureeditable over prettylabels that read
Use when creating diagrams or visual explanations -- editable Excalidraw diagrams, Mermaid inline diagrams, artifact previews, or publish-grade SVG+PNG technical diagrams.
methodology
- read trained first -- it carries the learned routing layer.
- identify the destination: inline doc/pr, standalone artifact, presentation, or live review of code or a diagram.
- map it: inline -> mermaid; editable canvas -> excalidraw; publish-grade svg+png -> tech-graph; inspection of an existing artifact -> preview.
- live project
AGENTS.mdand operator directives override everything here.
contents
- trainedlearned layer -- read first
- flow-diagramseditable flow diagrams as a live page
- excalidraweditable excalidraw diagrams -- architecture, data flow, workflows, and png/svg export
- mermaidjs-v11inline mermaid diagrams in docs/markdown -- flowchart, sequence, class, er, gantt, state, timeline, and user journey
- previewinspect a rendered diagram or an html artifact before delivery
- tech-graphpublish-grade svg+png technical diagrams -- architecture, data flow, flowchart, sequence, agent/memory, and concept maps