Skip to content
Skillpedia
Images & icons42k · #4759

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

https://github.com/zhaoxuya520/reverse-skill/blob/main/skills/diagram-generator/SKILL.md

Ready-to-paste message

Use this skill to help me: https://github.com/zhaoxuya520/reverse-skill/blob/main/skills/diagram-generator/SKILL.md Read the SKILL.md file at that link and follow its instructions for my task.
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-generator

Or download just the file:

curl -L https://raw.githubusercontent.com/zhaoxuya520/reverse-skill/main/skills/diagram-generator/SKILL.md -o SKILL.md
Technical content (original SKILL.md)

Original text by the author, straight from GitHub.

Diagram Generator

ACTION REQUIRED(读完后立刻执行)

  1. NOW:确认当前任务是否命中本 skill 的适用范围
  2. NOW:读取 ../tool-index.md,校验工具可用性和实际路径
  3. NEXT:缺工具时调用 bootstrap,不要猜路径
  4. 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

  1. Identify the user's intent, audience, and source material.
  2. Choose the diagram family and language using the decision table below.
  3. Normalize entities, relationships, labels, states, branches, and time/order information before writing diagram code.
  4. Generate concise, readable diagram source.
  5. Validate the syntax mentally and, when creating files, run scripts/render_diagram.py.
  6. 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 Assumptions section 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, or journey.
  • For flowcharts, use flowchart TD unless the user asks for left-to-right; use flowchart LR for 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 actor for humans and participant for 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

repo: zhaoxuya520/reverse-skill

Popularity

GitHub stars
42k
Ranking position
#4759
License
MIT
Updated
9/22/2026

Is this skill useful?

0

Sign in to vote.

Comments

  • …

More skills from this repository

Similar skills