diagram-maker

Diagram Maker

Create clear, correct diagrams as standalone SVG or self-contained HTML files. Default to SVG (inline-able, crisp at any size); use HTML when interactivity or Mermaid/Excalidraw-style rendering is wanted.

When to use (trigger phrases)

• "draw a diagram of …", "diagram the architecture / flow / sequence"
• "make an ER diagram", "visualize how these components interact"
• "I want a schematic / flowchart / state machine"

How to diagram

1. Pick the right form for the request:
   • Architecture / components → boxes + arrows, grouped by layer.
   • Process / flow → top-to-bottom or left-to-right flowchart with decision diamonds.
   • Sequence → vertical lifelines with horizontal message arrows (ordered top→bottom).
   • Data model → entity boxes with attribute lists + relationship lines.
2. Prefer Mermaid when the user wants editable/portable output — emit a fenced ```mermaid block (flowchart / sequenceDiagram / erDiagram / stateDiagram-v2). Many tools render it.
3. For SVG/HTML, write the file with the write tool, then open it. Keep a viewBox, a consistent palette, and readable font sizes (≥12px). Label every arrow.
4. Never fabricate relationships. If the diagram encodes code, ground every node/edge in actual files you read first.

Output conventions

• Save to a sensible path (e.g. docs/diagrams/<name>.svg or .html).
• State the file path clearly after writing.
• Keep diagrams legible: avoid >8 nodes per row; split into sub-diagrams when dense.

Mermaid quick templates

flowchart TD
  A[Start] --> B{Decision}
  B -- yes --> C[Do thing]
  B -- no --> D[Skip]
  C --> E[(Database)]

sequenceDiagram
  participant U as User
  participant A as API
  participant DB as Database
  U->>A: POST /order
  A->>DB: insert
  DB-->>A: ok
  A-->>U: 201 Created

For ER diagrams use erDiagram; for state use stateDiagram-v2.