creating-mermaid-diagrams

Mermaid Diagrams

Generate .mmd text files and export to PNG/SVG/PDF using mmdc (local) or Kroki API (no install).

Key advantage: Text-based syntax with fully automatic layout — no x/y coordinates needed.

Prerequisites

Option A: Local (mmdc)

npm install -g @mermaid-js/mermaid-cli
mmdc --version

Option B: Kroki API (no install)

curl --version  # Just need curl

Workflow

1. Update check (notify, don't pull) — first use per conversation. Throttle to once per 24 h via <this-skill-dir>/.last_update; never mutate the skill directory without explicit user consent.

   • If .last_update exists and is <24 h old, skip this step entirely.

   • Otherwise, fetch the latest tag from upstream:

     git -C <this-skill-dir> ls-remote --tags origin 'v*' 2>/dev/null \
       | awk '{print $2}' | sed 's|refs/tags/||' | sort -V | tail -1
     

   • Compare with this skill's metadata.version from the frontmatter. If the upstream tag is strictly newer (semver), tell the user one line and ask:

     "A newer version of this skill is available: vX.Y.Z → vA.B.C. Want me to git pull?"

     If they say yes, run git -C <this-skill-dir> pull --ff-only. Refresh .last_update either way so the prompt doesn't repeat for 24 hours.

   • If upstream is the same or older, refresh .last_update silently and continue.

   • On any failure (offline, not a git checkout — e.g. ClawHub-installed copy, read-only path, no permission), swallow the error silently and continue with the user's task. Do not mention the failure.

2. Check deps — try mmdc --version, fallback to Kroki if unavailable

3. Pick diagram type — choose from table below

4. Generate — write .mmd file to disk

5. Validate — run validation (REQUIRED before export)

6. Export — use mmdc or Kroki API to produce PNG/SVG/PDF

7. Report — tell user the output file paths

Validation (Required)

NEVER export a diagram without validating first.