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, schedule or data structure into Mermaid code, which is a text format for drawing flowcharts, sequence diagrams, ER diagrams, Gantt charts and about two dozen other diagram types. It saves a raw .mmd file and a .md file with the diagram embedded in figures/, then tries to render a PNG with the Mermaid CLI to confirm the syntax is valid, and reviews the result against a checklist.

Great for

  • Developers who want architecture, sequence or ER diagrams drawn from a written spec
  • Students or writers who need a quick diagram saved as editable text
  • Teams that keep documentation in Git and want diagrams stored as plain text

Skip it if

  • Anyone needing polished, brand-styled artwork, since output is limited to Mermaid's built-in layouts and themes
  • Users who do not want the agent to run shell commands, because the skill allows Bash(*) and runs mmdc or npx @mermaid-js/mermaid-cli@latest, which downloads and executes third-party code

Try asking

  • “Make a sequence diagram of how the login API calls the auth service and database”
  • “Draw an ER diagram for a blog with users, posts and comments”
  • “Create a Gantt chart for a six-week product launch plan”
  • “Turn this checkout process description into a flowchart with decision points”
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

  • Describe the components, connections and direction in your request so the agent picks the right diagram type
  • Install mermaid-cli locally first to avoid npx downloading the latest package each run
  • Review the generated .mmd file and PNG, since the agent's self-scoring is not a substitute for your own check

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.