diagram-generator
Lets your agent create and understand diagrams from text or code. It helps visualize complex processes like workflows or architectures. This makes systems easier to grasp.
What it does
This agent creates visual diagrams from text descriptions. It can generate flowcharts, architecture diagrams, data flows, and more, turning your ideas into clear, editable images.
When to use it
- ✓Turning notes into a visual flowchart.
- ✓Creating an architecture diagram for a report.
- ✓Drawing a security attack path.
Example of what to ask your AI
“Create a flowchart showing a user's login process, including success and failure.”
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 using simple text. The agent chooses the best way to draw it (using languages like Mermaid or Graphviz) and generates the diagram code, which can then be viewed or edited.
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 sickn33/agentic-awesome-skills --skill diagram-generatorOr download just the file:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/diagram-generator/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
Bundled upstream support
Supporting files are included at skill-relative paths. See UPSTREAM-NOTICE.md for their pinned sources, licenses, hashes, and import changes.
Diagram Generator
When to Use
- Turning textual analysis into Mermaid/Graphviz/PlantUML visuals.
- Producing attack-path or architecture diagrams for reports.
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.
…
FAQ
What types of diagrams can this agent create?
It can create various types, such as flowcharts, sequence diagrams, state diagrams, entity-relationship diagrams, mind maps, Gantt charts, and more.
What does 'editable diagram' mean?
It means the agent provides the code that generates the diagram. You can copy this code and edit it directly to make changes, rather than having to redraw everything.
What are Mermaid or Graphviz?
They are markup languages that describe how a diagram should be drawn. The agent uses these languages to create the diagram code from your description.
Details
Original description by the author
Generate, refine, validate, and render diagrams from natural language, notes, code, schemas, or existing diagram sources: flowcharts, swimlanes, attack-path graphs, data-flow diagrams, architecture, and state machines.
Popularity
- GitHub stars
- 48k
- Ranking position
- #2842
- License
- MIT
- Updated
- 10/15/2026
Comments
- …
More skills from this repository
00-andruia-consultant
Helps your agent start or improve AI projects. It analyzes code, suggests tools, and creates action plans in Spanish.
sickn33/agentic-awesome-skills
007
Lets your agent perform security audits and threat modeling. It's useful for protecting projects against attacks and vulnerabilities.
sickn33/agentic-awesome-skills
10-andruia-skill-smith
Helps your agent create or improve AI tools. It defines how tools work, writes documentation, and validates the structure.
sickn33/agentic-awesome-skills
20-andruia-niche-intelligence
Lets your agent create a summary about a specific industry. It's useful for understanding the context, rules, usage patterns, and risks of a project, using reliable sources.
sickn33/agentic-awesome-skills
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