mcpField
M
mermaid

mermaid

github.com/ahgraberDocuments650 installsUpdated today
Repository

About mermaid

mermaid is a skill for creating Mermaid diagrams for chatbot and Markdown interfaces. It supports local syntax validation and image rendering through the Mermaid CLI, without calling a web service.

Key features

  1. 01Create Mermaid diagram code
  2. 02Support flowcharts, sequence, and state diagrams
  3. 03Validate syntax with the local CLI
  4. 04Render SVG, PNG, or PDF
  5. 05Follow diagram guidelines for chat interfaces

Use cases

  1. 01Write Markdown diagrams for chat responses
  2. 02Check whether diagram code is valid
  3. 03Export diagrams as images or PDF
  4. 04Adjust diagrams for readability in chat

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/ahgraber/skills --skill mermaid

After installing, type/mermaidin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
chatbot-mermaid-guidelines.md
scripts/
render_mermaid.py
validate_mermaid.py

Details

From the project README

Mermaid Diagrams for Chatbots

Use this skill to create Mermaid diagrams that render well in Markdown chat interfaces, validate their syntax locally, and render images without calling a web service.

Invocation Notice

  • Inform the user when this skill is being invoked by name: mermaid.

Workflow

  1. Identify the diagram type (flowchart, sequenceDiagram, stateDiagram-v2) based on the request.
  2. Draft Mermaid code in a fenced Markdown block using mermaid.
  3. Follow formatting conventions in references/chatbot-mermaid-guidelines.md.
  4. Validate the diagram using scripts/validate_mermaid.py.
  5. If the user wants an image file, render with scripts/render_mermaid.py.

Scripts

  • scripts/validate_mermaid.py
    • Validate Mermaid code by invoking the local Mermaid CLI (mmdc).
    • Use when you need to check whether Mermaid parses without errors.
  • scripts/render_mermaid.py
    • Render Mermaid to SVG/PNG/PDF using the local Mermaid CLI (mmdc).
    • Prefer SVG for Markdown renderers when image embedding is required.

Notes

  • These scripts expect mmdc to be available on PATH (Mermaid CLI). If missing, instruct the user to install it locally; do not use the Mermaid web service.
  • Dependencies are managed via inline uv script metadata in each Python script. Use --install-chromium to bootstrap the Chromium binary via pyppeteer when needed.
  • Keep diagrams compact and readable in chat: avoid overly wide graphs, use short labels, and group related states.
  • If the user asks for raw Markdown, return only the fenced mermaid block unless they ask for extra explanation.

Comments

Markdown supported