Skip to content
Skillpedia
Images & icons48k · #2842

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

https://github.com/sickn33/agentic-awesome-skills/blob/main/plugins/agentic-awesome-skills-claude/skills/diagram-generator/SKILL.md

Ready-to-paste message

Use this skill to help me: https://github.com/sickn33/agentic-awesome-skills/blob/main/plugins/agentic-awesome-skills-claude/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 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-generator

Or 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.md
Technical 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

  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.

…

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.

repo: sickn33/agentic-awesome-skills

Popularity

GitHub stars
48k
Ranking position
#2842
License
MIT
Updated
10/15/2026

Is this skill useful?

0

Sign in to vote.

Comments

  • …

More skills from this repository

Similar skills