{"name":"draw-mermaid-diagram-prompt","description":"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.","category":"writing-prompts","tags":["diagrams","docs","github"],"models":["any"],"proven":false,"passing_families":0,"model_testing":"Not yet model-tested; testing Jan 2027","url":"https://theskillvault.ai/skills/draw-mermaid-diagram-prompt","api_url":"https://theskillvault.ai/api/skills/draw-mermaid-diagram-prompt","raw_url":"https://theskillvault.ai/api/skills/draw-mermaid-diagram-prompt/raw","body":"# Draw a Mermaid diagram (prompt)\n\nMermaid 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.\n\n## When to use\n- You want a flowchart, sequence diagram or architecture sketch in a README or doc.\n- You described a system in words and want a picture of it.\n- An old diagram image is out of date and nobody has the source file.\n\n## Steps\n1. Describe the thing to draw, or paste code, notes or a spec.\n2. Paste it into the prompt below.\n3. Preview the output in GitHub or at mermaid.live, and fix any syntax error it reports.\n4. Commit the diagram into the doc inside a mermaid code block.\n\n## Prompt\n```text\nTurn the input below into one Mermaid diagram.\n\n1. 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.\n2. Keep it readable: at most about 15 nodes. If the input is bigger, draw the main idea and list what you left out.\n3. Use short, clear labels. Put quotes around labels with spaces or symbols.\n4. Check the syntax carefully so it renders on GitHub without errors.\n5. Output the diagram in a fenced code block marked mermaid.\n6. Under it, add \"How to read it\" with 3-5 short bullets.\n\nINPUT:\n{{DESCRIPTION, CODE OR NOTES}}\n```\n\n## How to adapt\n- Want left-to-right? Add \"use flowchart LR\".\n- Need several views? Ask for one diagram per view (context, then detail), each under 15 nodes.\n\n## Gotchas\n- Do not include internal hostnames, IP addresses or secrets in a diagram that goes in a public repo.\n- Mermaid syntax differs between versions. If a diagram fails on one site, try mermaid.live to find the error.\n\n## Portability\nWorks 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.\n\n## Done when\n- The diagram renders without errors.\n- Someone new can follow it using the \"How to read it\" notes.\n\n## Example prompt\n\"Draw a Mermaid sequence diagram of how a user signs in with Google and gets redirected back to my app.\"\n\n---\nConverted from the \"create_mermaid_visualization_for_github\" pattern in danielmiessler/Fabric (MIT, Copyright (c) 2012-2024 Scott Chacon and others). See LICENSE.txt.","files":["LICENSE.txt"],"license":"MIT","license_name":"MIT License","license_url":"https://opensource.org/license/mit","attribution":"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","install":{"claude_code":"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":"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'","agents":"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'","mcp_url":"https://theskillvault.ai/mcp","cursor_mcp_deeplink":"cursor://anysphere.cursor-deeplink/mcp/install?name=theskillvault&config=eyJ1cmwiOiJodHRwczovL3RoZXNraWxsdmF1bHQuYWkvbWNwIn0%3D","mcp_config":{"mcpServers":{"theskillvault":{"url":"https://theskillvault.ai/mcp"}}}},"bundles":[],"tested_on":[{"family":"chatgpt","name":"ChatGPT","outcome":null,"date":null,"source":null,"counts":false,"stale":false},{"family":"claude","name":"Claude","outcome":null,"date":null,"source":null,"counts":false,"stale":false},{"family":"gemini","name":"Gemini","outcome":null,"date":null,"source":null,"counts":false,"stale":false},{"family":"grok","name":"Grok","outcome":null,"date":null,"source":null,"counts":false,"stale":false},{"family":"llama","name":"Llama","outcome":null,"date":null,"source":null,"counts":false,"stale":false},{"family":"deepseek","name":"DeepSeek","outcome":null,"date":null,"source":null,"counts":false,"stale":false},{"family":"mistral","name":"Mistral","outcome":null,"date":null,"source":null,"counts":false,"stale":false},{"family":"qwen","name":"Qwen","outcome":null,"date":null,"source":null,"counts":false,"stale":false},{"family":"kimi","name":"Kimi K","outcome":null,"date":null,"source":null,"counts":false,"stale":false}],"proven_rule":{"threshold":5,"window_days":365,"computed_at":"2026-11-02T03:20:33.817Z"}}