Writing prompts · Prompt

Draw a Mermaid diagram (prompt)

draw-mermaid-diagram-prompt

A prompt that turns a system, process, flow or idea into a Mermaid diagram that renders in GitHub, Notion and most Markdown docs - it picks the right diagram type, keeps it readable, checks the syntax, and adds a short note on how to read it. Use when the user wants a flowchart, sequence diagram, architecture diagram or any diagram as code.

Works with: Any AI Not yet model-tested; testing Jan 2027

View raw SKILL.mdInstall

Paste it into ChatGPT, Claude, Gemini or any AI chat, then tell it about your project. How it works

Install in Claude Code, Cursor or Codex (optional)

Only for AI coding tools that read skill folders. Run one line in a terminal, in your project folder. It downloads this skill's text files from TheSkillVault and nothing else; you can read them first with “View raw SKILL.md”.

Claude Code (all your projects)

curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/draw-mermaid-diagram-prompt/raw' -o ~/'.claude/skills/draw-mermaid-diagram-prompt/SKILL.md' && curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/draw-mermaid-diagram-prompt/files/LICENSE.txt' -o ~/'.claude/skills/draw-mermaid-diagram-prompt/LICENSE.txt'

Cursor (this project)

curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/draw-mermaid-diagram-prompt/raw' -o '.cursor/skills/draw-mermaid-diagram-prompt/SKILL.md' && curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/draw-mermaid-diagram-prompt/files/LICENSE.txt' -o '.cursor/skills/draw-mermaid-diagram-prompt/LICENSE.txt'

Codex and other Agent Skills tools (this project)

curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/draw-mermaid-diagram-prompt/raw' -o '.agents/skills/draw-mermaid-diagram-prompt/SKILL.md' && curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/draw-mermaid-diagram-prompt/files/LICENSE.txt' -o '.agents/skills/draw-mermaid-diagram-prompt/LICENSE.txt'

Or connect the whole library over MCP

Add TheSkillVault to Cursor or add this to your app's MCP settings (read-only; help):

{
  "mcpServers": {
    "theskillvault": {
      "url": "https://theskillvault.ai/mcp"
    }
  }
}

Mermaid turns text into diagrams. GitHub, GitLab, Notion and many docs tools render it, so the diagram lives next to your code and is easy to update.

When to use

  • You want a flowchart, sequence diagram or architecture sketch in a README or doc.
  • You described a system in words and want a picture of it.
  • An old diagram image is out of date and nobody has the source file.

Steps

  1. Describe the thing to draw, or paste code, notes or a spec.
  2. Paste it into the prompt below.
  3. Preview the output in GitHub or at mermaid.live, and fix any syntax error it reports.
  4. Commit the diagram into the doc inside a mermaid code block.

Prompt

Turn the input below into one Mermaid diagram.

1. Pick the best type: flowchart for steps and decisions, sequenceDiagram for messages between parts over time, classDiagram or erDiagram for data, stateDiagram for states, or gantt for timelines. Say which one and why in one line.
2. Keep it readable: at most about 15 nodes. If the input is bigger, draw the main idea and list what you left out.
3. Use short, clear labels. Put quotes around labels with spaces or symbols.
4. Check the syntax carefully so it renders on GitHub without errors.
5. Output the diagram in a fenced code block marked mermaid.
6. Under it, add "How to read it" with 3-5 short bullets.

INPUT:
{{DESCRIPTION, CODE OR NOTES}}

How to adapt

  • Want left-to-right? Add "use flowchart LR".
  • Need several views? Ask for one diagram per view (context, then detail), each under 15 nodes.

Gotchas

  • Do not include internal hostnames, IP addresses or secrets in a diagram that goes in a public repo.
  • Mermaid syntax differs between versions. If a diagram fails on one site, try mermaid.live to find the error.

Portability

Works with any chat AI. Output renders on GitHub, GitLab, Notion, Obsidian and most docs tools; if your tool does not support Mermaid, mermaid.live can export an image instead.

Done when

  • The diagram renders without errors.
  • Someone new can follow it using the "How to read it" notes.

Example prompt

"Draw a Mermaid sequence diagram of how a user signs in with Google and gets redirected back to my app."

---

Converted from the "create_mermaid_visualization_for_github" pattern in danielmiessler/Fabric (MIT, Copyright (c) 2012-2024 Scott Chacon and others). See LICENSE.txt.

Bundled files

Licence

Adapted from Daniel Miessler and Fabric contributors (create_mermaid_visualization_for_github pattern) (Copyright (c) 2012-2024 Scott Chacon and others), MIT License. Converted by TheSkillVault into a fill-in prompt: added diagram-type selection, a size limit and syntax self-check, steps, safety and done-when sections; dropped the upstream bias toward large intricate diagrams.

Licence: MIT License. Attribution when you reuse it: Based on work by Daniel Miessler and Fabric contributors (create_mermaid_visualization_for_github pattern) (Copyright (c) 2012-2024 Scott Chacon and others, MIT License), https://github.com/danielmiessler/Fabric/blob/8ce0909d8622a61b6aaf539d467ba31bb7e0b6dd/data/patterns/create_mermaid_visualization_for_github/system.md; adapted by TheSkillVault, https://theskillvault.ai