diagram

Create Mermaid diagrams and always render them to visually verify the result before saving.

Workflow

1. Choose the right diagram type for the task
2. Write the mermaid code
3. Render it to see the result
4. Review the image for layout issues and correctness
5. Iterate until the diagram is clear
6. Save the final mermaid code to a file (usually in a markdown code block)

Key guidelines

• Always render — never save a diagram without visually checking it first
• Prefer graph LR over graph TD for architecture and flow diagrams
• Max 15 nodes per diagram — split into multiple diagrams if needed
• Use descriptive node labels: WE["Workflow Engine"] not just WE
• Label edges when the relationship type matters: A -->|HTTP| B
• Group related nodes in subgraphs with clear labels
• Quote special characters in node text: A["my [special] node"]

After rendering, check for

• Overlapping or cramped labels — shorten text or reduce nodes
• Wrong direction — try switching between LR and TD
• Missing or unclear connections — add edge labels
• Unbalanced layout — reorder nodes or restructure subgraphs