mcpField
M
mermaid

mermaid

github.com/mitsuhikoDocuments3.2k152 installsUpdated 5w ago
Repository

About mermaid

A skill for validating Mermaid diagrams with the official Mermaid CLI. It helps people authoring diagrams catch syntax errors and optionally save rendered SVG output.

Key features

  1. 01Parse and render Mermaid files
  2. 02Return a failing exit code for invalid syntax
  3. 03Print a best-effort ASCII preview
  4. 04Optionally save rendered SVG

Use cases

  1. 01Check diagram syntax before adding it to Markdown
  2. 02Render a validated diagram to an SVG file

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/mitsuhiko/agent-stuff --skill mermaid

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

Bundled filestools/validate.sh

Details

From the project README

Mermaid Skill

Use this skill to quickly validate Mermaid diagrams by parsing + rendering them with the official Mermaid CLI.

Prerequisites

  • Node.js + npm (for npx).
  • First run downloads a headless Chromium via Puppeteer. If Chromium is missing, set PUPPETEER_EXECUTABLE_PATH.

Tool

Validate a diagram
./tools/validate.sh diagram.mmd [output.svg]
  • Parses and renders the Mermaid source.
  • Non-zero exit = invalid Mermaid syntax.
  • Prints an ASCII preview using beautiful-mermaid (best-effort; not all diagram types are supported).
  • If output.svg is omitted, the SVG is rendered to a temp file and discarded.

Workflow (short)

  1. If the diagram will live in Markdown: draft it in a standalone diagram.mmd first (the tool only validates plain Mermaid files).
  2. Write/update diagram.mmd.
  3. Run ./tools/validate.sh diagram.mmd.
  4. Fix any errors shown by the CLI.
  5. Once it validates, copy the Mermaid block into your Markdown file.

Comments

Markdown supported