Skip to content
Get packs

Diagram Generator

Turns notes, schemas, or code into editable Mermaid, Graphviz, PlantUML, or SVG diagrams.

Source Download skill
Repository
zhaoxuya520/reverse-skill
Stars
43,969
Licence
MIT
Files
6 files

What it does

Once installed, the agent turns messy notes, tables, code, or schemas into clear diagrams such as flowcharts, sequence diagrams, ER diagrams, Gantt charts, and architecture maps. It writes the diagram as text source (Mermaid by default) that you can paste into Markdown or edit later. When you ask for a PNG, SVG, or PDF, it can also run a bundled Python script to render the file using command-line renderers installed on your machine.

Great for

  • Developers who want to document system architecture or database schemas quickly
  • Product or project managers turning meeting notes into flowcharts or Gantt charts
  • Analysts who need dependency or network graphs rendered from structured data

Skip it if

  • Users who need a finished, polished design from a designer; the output is functional, not brand-styled graphics
  • Users who expect rendering to work out of the box: the rendering script depends on external tools (such as Mermaid CLI, Graphviz, or PlantUML) that must be installed separately

Try asking

  • “Turn these meeting notes into a swimlane flowchart showing who does each step”
  • “Create an ER diagram from this SQL schema”
  • “Draw a Graphviz dependency graph of these npm packages and export it as a PNG”
  • “Make a Gantt chart from this project timeline table”
Step-by-step guide: how to use Diagram GeneratorInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 6 original files, the MIT licence and an attribution note.

    diagram-generator.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip diagram-generator.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip diagram-generator.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Ask for Mermaid source first; only request PNG/SVG/PDF when you actually need the file, since rendering needs extra tools installed
  • Review the Assumptions section the agent adds when your input was vague, and correct any wrong guesses
  • Say explicitly if you want left-to-right layout or a specific diagram type such as sequence or state diagram

What's inside

  • agents/openai.yaml
  • README.md
  • references/diagram-patterns.md
  • scripts/create_sample_diagrams.py
  • scripts/render_diagram.py
  • SKILL.md

Redistributed unmodified from zhaoxuya520/reverse-skill under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.