create-mermaid-diagrams

Create Mermaid Diagrams

Overview

Create clear Mermaid diagrams and always validate output through a repeatable loop that catches syntax and rendering errors before final delivery.

Context Marker

Always begin your response with all active emoji markers, in the order they were introduced.

Format: "<marker1><marker2><marker3>\n<response>"

The marker for this skill is: 🎨

Manual Triggering

When manual invocation is needed, trigger this skill using whatever mechanism your assistant/tool provides for manual skill selection or activation.

Workflow

1. Define communication intent and choose the smallest diagram type that fits:

   • flowchart for process and architecture flow.
   • sequenceDiagram for interaction timelines.
   • stateDiagram-v2 for state transitions.

2. Generate markdown with exactly one Mermaid fence per requested diagram:

   • Opening fence must be exactly ```mermaid (no leading space; any spaced example is only Markdown escaping).
   • Closing fence must be exactly ``` (no leading space; any spaced example is only Markdown escaping).
   • Keep fence markers at column 0.

3. Validate the full markdown file with mmdc:

   mmdc -i <input.md> -o /tmp/<name>-rendered.md -a /tmp/<name>-mermaid-artifacts
   

4. If validation fails:

   • Read raw Mermaid CLI output from mmdc.
   • Apply the minimal targeted fix in the failing Mermaid fence.
   • Re-run the same full-file validation command.

5. Repeat failure analysis and correction up to 3 attempts.

6. If still failing after 3 attempts, return:

   • Best-effort corrected diagram.
   • Validation summary with likely root cause.
   • Raw error excerpt from Mermaid CLI output.
   • Next manual fix suggestion.

Feedback Loop Rules

• Do not change diagram type unless the error indicates the type keyword is invalid.
• Prefer minimal edits per retry to avoid introducing new syntax errors.
• Preserve user intent and semantic meaning while repairing syntax.
• Stop retrying early when validation succeeds.