diagram-generator
Helps your agent create and refine diagrams from descriptions. It's useful for visualizing workflows, architectures, data, and plans clearly and organized.
What it does
This agent creates visual diagrams from text descriptions. It can generate various diagram types like flowcharts, sequence diagrams, and mind maps, turning your ideas into clear visuals.
When to use it
- ✓When you need to visualize a process or workflow.
- ✓To organize complex ideas into a mind map.
- ✓When explaining the interaction between different parts of a system.
Example of what to ask your AI
“Create a flowchart showing a user login process, including success and failure paths.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
You describe what you want in the diagram, and the agent chooses the best way to represent it using special code. It then generates the code and shows you the visual diagram.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add zhaoxuya520/reverse-skill --skill diagram-generatorOr download just the file:
curl -L https://raw.githubusercontent.com/zhaoxuya520/reverse-skill/main/skills/diagram-generator/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
Diagram Generator
ACTION REQUIRED(读完后立刻执行)
NOW:确认当前任务是否命中本 skill 的适用范围NOW:读取../tool-index.md,校验工具可用性和实际路径NEXT:缺工具时调用 bootstrap,不要猜路径ACT:进入"工作流"第一步并执行,不要停在确认状态
Purpose
Create clear, editable diagrams from messy or structured inputs. Prefer text-based diagram source first so the result can be reviewed, versioned, and refined. Render to files only when the user asks for an image/PDF or when a downloadable artifact would materially help.
Default workflow
- Identify the user's intent, audience, and source material.
- Choose the diagram family and language using the decision table below.
- Normalize entities, relationships, labels, states, branches, and time/order information before writing diagram code.
- Generate concise, readable diagram source.
- Validate the syntax mentally and, when creating files, run
scripts/render_diagram.py. - Return the diagram source plus a short note about assumptions. When files are generated, include links to the output files.
Do not over-ask for clarification. If the request is underspecified, make reasonable assumptions and label them briefly.
Diagram language decision table
Use Mermaid unless another language is clearly better.
| User wants | Prefer | Why |
|---|---|---|
| process flow, decision tree, simple swimlane | Mermaid flowchart | readable and easy to paste into Markdown |
| sequence of system/user interactions | Mermaid sequenceDiagram or PlantUML sequence | Mermaid for docs; PlantUML for UML formality |
| lifecycle, state machine, transitions | Mermaid stateDiagram-v2 or PlantUML state | compact transition syntax |
| database schema, entities, relationships | Mermaid erDiagram | portable ER notation |
| class/interface/object model | Mermaid classDiagram or PlantUML class | Mermaid for docs; PlantUML for detailed UML |
| project schedule | Mermaid gantt | concise timeline syntax |
| hierarchy, ideas, notes | Mermaid mindmap | good default for idea maps |
| customer/product journey | Mermaid journey | built-in journey notation |
| git history | Mermaid gitGraph | built-in git notation |
| dependency graph, package graph, large network | Graphviz DOT | better layout engines for dense graphs |
| architecture with layers, clusters, boundaries | Mermaid flowchart with subgraphs, Graphviz clusters, or PlantUML C4-style | choose based on requested fidelity |
| weighted flow/sankey-like relationship | Mermaid sankey-beta when supported, otherwise SVG or Graphviz | Mermaid support may vary by renderer |
| custom visual where source languages fit poorly | SVG | precise control over layout and styling |
Output policy
- Always provide editable source unless the user explicitly asks only for an image.
- Default to a single best diagram. Offer alternatives only when genuinely useful.
- Prefer stable, simple syntax over fancy features that may not render in older Mermaid/PlantUML versions.
- Use short labels. Split long text into notes outside the diagram when needed.
- Avoid ambiguous node IDs. Use ASCII IDs and human-readable labels.
- Preserve user terminology, but standardize capitalization within a diagram.
- For technical diagrams, include boundaries such as client, service, database, queue, external API, and operator/user when they are implied.
- For business-process diagrams, distinguish happy path, decision points, failures, retries, and manual steps when present.
- For diagrams created from uncertain text, include an
Assumptionssection after the code.
Mermaid generation rules
Consult references/diagram-patterns.md for compact templates.
General Mermaid rules:
- Start with the correct diagram directive, for example
flowchart TD,sequenceDiagram,erDiagram,gantt,mindmap, orjourney. - For flowcharts, use
flowchart TDunless the user asks for left-to-right; useflowchart LRfor architecture and pipelines. - Use subgraphs for swimlanes or architecture layers. Name subgraphs with readable labels.
- Keep node IDs stable and ASCII-only, for example
ingest_service[Ingest Service]. - Quote labels that contain punctuation likely to confuse the parser.
- Use decision diamonds for branching:
decision{Condition?}. - Use consistent edge labels:
-- yes -->,-- no -->,-. async .->, or== critical ==>only when meaningful. - In sequence diagrams, declare participants before messages. Use
actorfor humans andparticipantfor systems.
…
FAQ
What kinds of diagrams can it create?
It can create flowcharts, sequence diagrams, mind maps, org charts, state diagrams, ER diagrams, class diagrams, dependency graphs, Gantt charts, user journeys, Sankey flows, network graphs, and other visual models.
Do I need to know how to code to use it?
No, you just need to describe the diagram in plain language. The agent handles the technical part of generating the code and the image.
Can I edit the diagram later?
Yes, the agent always provides the editable source code for the diagram, allowing you to easily refine or modify it.
Details
Original description by the author
generate, refine, validate, and render diagrams from natural language, notes, code snippets, schemas, tables, or existing diagram source. use for flowcharts, swimlanes, sequence diagrams, state diagrams, er diagrams, class diagrams, architecture/c4-style diagrams, dependency graphs, gantt charts, mind maps, user journeys, sankey-style flows, org charts, network graphs, and other visual models. sup
Popularity
- GitHub stars
- 42k
- Ranking position
- #4759
- License
- MIT
- Updated
- 9/22/2026
Comments
- …
More skills from this repository
competition-ad-certificate-abuse
Helps your agent analyze attacks on digital certificate systems. It investigates how certificates can be misused to gain access.
zhaoxuya520/reverse-skill
competition-agent-cloud
Helps your agent analyze security challenges in AI and cloud systems. It investigates how prompts, tools, and the cloud can be exploited.
zhaoxuya520/reverse-skill
competition-android-hooking
Helps your agent investigate Android applications. It analyzes how apps work internally and how they might be modified or exploited.
zhaoxuya520/reverse-skill
competition-browser-persistence
Helps your agent analyze how websites store information in your browser. It investigates cookies and other data to understand how sessions work.
zhaoxuya520/reverse-skill
Similar skills
ios-icon-gen
Lets your agent generate icons for iOS apps. It uses Apple symbols or icons from other sources to create the correct files.
affaan-m/ECC
algorithmic-art
Helps your agent create art using code, generating unique images. It's useful when you want original computer-generated art.
anthropics/skills
canvas-design
Helps your agent create beautiful visual art in files. It's useful when you ask for a poster, art, or any static design.
anthropics/skills