Skip to content
Get packs

Mermaid Diagram Generator

Turns plain-language requirements into Mermaid diagram files, checked by rendering them.

Source Download skill
Repository
wanshuiyin/Auto-claude-code-research-in-sleep
Stars
18,482
Licence
MIT
Files
1 file

What it does

Once installed, the agent can turn a description of a process, system, schema, timeline or other structure into Mermaid diagram code. It saves the code as a .mmd file and a .md preview file in a figures/ folder, then tries to render a PNG using the Mermaid CLI to check the syntax. It also reviews the rendered image against a checklist and revises the diagram a limited number of times if it finds problems.

Great for

  • Developers who want architecture, sequence or flow diagrams drafted from a written request
  • Students or researchers who need clean diagrams for papers or reports
  • Anyone who wants editable diagram source code rather than a static image

Skip it if

  • Users who need pixel-perfect design work, since the output depends on Mermaid's layout engine and the agent's visual review can miss problems (the review is self-assessed)
  • Environments where running npx or installing packages from the internet is not allowed, because the verification step may download and execute @mermaid-js/mermaid-cli

Try asking

  • “Create a flowchart of our user signup and email verification process and save it in figures/”
  • “Draw a sequence diagram for how the checkout service calls the payment API”
  • “Make an ER diagram for these five database tables”
  • “Build a Gantt chart for a six-week project plan”
Step-by-step guide: how to use Mermaid Diagram GeneratorInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 1 original files, the MIT licence and an attribution note.

    mermaid-diagram.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip mermaid-diagram.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip mermaid-diagram.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Install mmdc globally beforehand so the skill does not fetch packages via npx on every run
  • Describe components, connections and direction explicitly, for example which arrows go from A to B
  • Review the generated PNG yourself, since the built-in visual score is produced by the agent and is not a guarantee of correctness

What's inside

  • SKILL.md

Redistributed unmodified from wanshuiyin/Auto-claude-code-research-in-sleep under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.