Agent skill

Diagram Generator

by sickn33 in sickn33/agentic-awesome-skills

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…

MITAuto-check passedDevelopment

Install Diagram Generator

skills CLI
$ npx skills add sickn33/agentic-awesome-skills --skill diagram-generator -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install sickn33/agentic-awesome-skills diagram-generator --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/sickn33/agentic-awesome-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/diagram-generator .claude/skills/diagram-generator && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
diagram-generator
GitHub stars
47k
Used in
1 other repo
Token cost
~2.3k tokens
SKILL.md length
890 words
Files
3 (incl. references)
Skills in repo
1,497
Repo updated
First seen
Licence
MIT

At a glance

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…

  • Works in 6 steps: Identify the user's intent, audience,… → Choose the diagram family and language… → Normalize entities, relationships,… → …
  • Tasks that involve Diagrams
  • SKILL.md covers When to Use, Purpose, Default workflow and Diagram language decision table, plus 8 more sections
  • Calls python and npm; reaches graphviz.org and plantuml.com

What it does

Diagram Generator is an agent skill from sickn33/agentic-awesome-skills. 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.

Its SKILL.md is about 2.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including reference files (for example `references/README.md` and `references/diagram-patterns.md`).

It sits in Development, covering Diagrams. It works with Mermaid. The repository describes itself as: AAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 2,400+ agentic skills. Includes… The licence is MIT.

When your agent uses it

  • Tasks that involve Diagrams

Example prompts

  • “/diagram-generator”

Requirements

  • Python 3
  • Node.js

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  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.

What it can do on your machine

Read from SKILL.md and the folder at commit b84d35a. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • python
    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • graphviz.org
    • plantuml.com
    • github.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Diagram Generator loads about 2.3k tokens when it runs, and up to ~3.5k if it reads all its reference files. Until then it costs about 59 tokens; SKILL.md has 890 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~59
When it runs · the whole SKILL.md, loaded when a task matches
~2.3k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~3.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from sickn33/agentic-awesome-skills at commit b84d35a, republished under its MIT licence (© sickn33). 890 words, ~2,285 tokens.

Download SKILL.mdSave it as .claude/skills/diagram-generator/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
diagram-generator
description
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.
risk
safe
source
https://github.com/zhaoxuya520/reverse-skill
source_repo
zhaoxuya520/reverse-skill
source_type
community
date_added
2026-08-25
license
MIT
license_source
https://github.com/zhaoxuya520/reverse-skill/blob/main/LICENSE

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 wantsPreferWhy
process flow, decision tree, simple swimlaneMermaid flowchartreadable and easy to paste into Markdown
sequence of system/user interactionsMermaid sequenceDiagram or PlantUML sequenceMermaid for docs; PlantUML for UML formality
lifecycle, state machine, transitionsMermaid stateDiagram-v2 or PlantUML statecompact transition syntax
database schema, entities, relationshipsMermaid erDiagramportable ER notation
class/interface/object modelMermaid classDiagram or PlantUML classMermaid for docs; PlantUML for detailed UML
project scheduleMermaid ganttconcise timeline syntax
hierarchy, ideas, notesMermaid mindmapgood default for idea maps
customer/product journeyMermaid journeybuilt-in journey notation
git historyMermaid gitGraphbuilt-in git notation
dependency graph, package graph, large networkGraphviz DOTbetter layout engines for dense graphs
architecture with layers, clusters, boundariesMermaid flowchart with subgraphs, Graphviz clusters, or PlantUML C4-stylechoose based on requested fidelity
weighted flow/sankey-like relationshipMermaid sankey-beta when supported, otherwise SVG or GraphvizMermaid support may vary by renderer
custom visual where source languages fit poorlySVGprecise 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.
  • Use alt/else/end, opt/end, loop/end, and par/and/end blocks for conditional, optional, repeated, and parallel flows.
Show full SKILL.md (315 more words)Show less

Graphviz DOT generation rules

Use Graphviz for large, dense, or layout-sensitive relationship diagrams.

  • Prefer digraph G for directed relationships and graph G for undirected networks.
  • Set layout-friendly graph attributes at the top: rankdir=LR, nodesep, ranksep, and splines=true when helpful.
  • Use subgraph cluster_name for boundaries and subsystems.
  • Use plain labels and restrained styling.
  • Use edge labels only when they add meaning.
  • For many nodes, group by domain with clusters and avoid crossing-heavy all-to-all edges.

PlantUML generation rules

Use PlantUML when the user asks for UML or needs formal UML notation.

  • Wrap diagrams with @startuml and @enduml.
  • Use actor, participant, database, queue, collections, or component stereotypes when useful.
  • Use package, rectangle, or node for architecture boundaries.
  • For class diagrams, include only important fields/methods unless the user asks for exhaustive detail.
  • For activity diagrams, use clear start/end markers and explicit branch labels.

SVG generation rules

Use SVG only when text diagram languages cannot express the requested visual reliably.

  • Keep SVG simple, accessible, and editable.
  • Include <title> and meaningful text labels.
  • Prefer rectangles, lines, arrows, and groups over complex paths.
  • Do not embed external fonts or remote images.

Rendering files

When the user asks for PNG/SVG/PDF, create a source file and run:

bash
python "<SKILL_ROOT>/diagram-generator/scripts/render_diagram.py" input.mmd --format svg --out output.svg
python "<SKILL_ROOT>/diagram-generator/scripts/render_diagram.py" input.dot --format png --out output.png
python "<SKILL_ROOT>/diagram-generator/scripts/render_diagram.py" input.puml --format svg --out output.svg

<SKILL_ROOT> 是本包 skills/ 目录的实际路径,AI 应自动检测。

The renderer is intentionally dependency-tolerant. It tries common local tools and reports actionable installation hints if a renderer is unavailable. Do not claim an image was rendered unless the script completed successfully and the output file exists.

Validation checklist

Before finalizing:

  • The diagram type matches the user's task.
  • The source is syntactically plausible for the chosen language.
  • Labels are short enough to fit.
  • Edges and message order reflect the input accurately.
  • Assumptions are called out when the input was incomplete.
  • For generated files, the output exists and opens or has nonzero size.

Common response template

Use this structure for most diagram answers:

markdown
下面是可编辑的 [language] 版本:

```[language]
[source]

Assumptions:

  • [only if needed]

Rendered file: [link] [only if generated]


For English user requests, respond in English. For Chinese user requests, respond in Chinese unless they ask otherwise.

---

## 按需自举(On-Demand Bootstrap)

### 自动化能力边界

| 工具 | 可自动安装 | 安装方式 | 说明 |
|------|-----------|---------|------|
| Mermaid CLI (mmdc) | ✓ | npm install -g @mermaid-js/mermaid-cli | 渲染 Mermaid 为 PNG/SVG |
| Graphviz (dot) | ✗ | 手动安装 | https://graphviz.org/download/ |
| PlantUML | ✗ | 需要 Java + plantuml.jar | https://plantuml.com/download |
| Python (render script) | ✓ | 已在 bootstrap 中 | `scripts/render_diagram.py` 依赖 |

### 说明

本 skill 主要输出文本格式的图表源码(Mermaid/DOT/PlantUML),不一定需要本地渲染工具。只有当用户明确要求生成 PNG/SVG/PDF 文件时才需要对应的渲染器。

如果渲染器不可用,`scripts/render_diagram.py` 会输出安装提示而不是报错。

---

## 路由上下文

**上游入口**: `skills/SKILL.md`(总控)、`routing.md`
**触发条件**: 用户说"画图"、"流程图"、"架构图"、"攻击路径图"、"时序图"、"Mermaid"、"Graphviz"、"PlantUML"
**下游出口**:
- 生成的图表可嵌入 `docs-generator/` 的报告中
- 攻击路径图可配合 `pentest-tools/` 的渗透报告

**同级关联模块**: `docs-generator/`(报告中嵌入图表)


## 任务完成自检(声称完成前 MUST 通过)

- [ ] 我是否执行了工作流中的每一步(而不是只阅读)?
- [ ] 我是否基于 `tool-index` 使用了真实工具路径?
- [ ] 我是否产出了可复现证据(命令/脚本/截图/报告)?
- [ ] 我是否完成并回写了 RULES 要求的 Checklist 项?

## Limitations

- Complex auto-layouts may need manual adjustment in the target tool.
- Rendering fidelity depends on the available diagram CLI/renderer.

> Adapted from [zhaoxuya520/reverse-skill](https://github.com/zhaoxuya520/reverse-skill) (MIT).

© sickn33, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 2 other files (references) in skills/diagram-generator of sickn33/agentic-awesome-skills.

  • SKILL.md
  • references/README.md
  • references/diagram-patterns.md

Open the folder on GitHubat commit b84d35a

Used in 1 other repository

We found 5 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in sickn33/agentic-awesome-skills, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Diagram Generator next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Diagram Generator compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Diagram Generator this skillsickn33/agentic-awesome-skills47k1 repos~2.3kAutomated safety check: PassMIT
Archify Diagramstt-a1i/archify82k—~2.9kAutomated safety check: PassMIT
Diagram Designcathrynlavery/diagram-design49k1 repos~7.6kAutomated safety check: PassMIT
Draw.io Diagram StudioAgents365-ai/drawio-skill10k—~2.4kAutomated safety check: NotesMIT
Pretty Mermaid Rendererimxv/Pretty-mermaid-skills1.5k—~2kAutomated safety check: PassMIT
Archify Diagram BuilderUnclecheng-li/AI_Animation1.5k2 repos~4.1kAutomated safety check: PassMIT

Similar skills

  • Archify Diagrams

    tt-a1i/archify

    Creates interactive architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone HTML with inline SVG, themes and image or video export.

    82k GitHub stars~2.9k tokensUpdated today
    DevelopmentAuto-check passed
  • Diagram Design

    cathrynlavery/diagram-design

    Creates branded diagrams, from architecture, flowchart and sequence to charts and maps, as self-contained HTML with inline SVG, with import from draw.io, Mermaid and Excalidraw.

    49k GitHub starsUsed in 1 repo~7.6k tokens
    DevelopmentAuto-check passed
  • Draw.io Diagram Studio

    Agents365-ai/drawio-skill

    Creates and edits editable draw.io diagrams from descriptions, code, infrastructure files, SQL and API schemas, with sync, review, test and export tools.

    10k GitHub stars~2.4k tokensUpdated today
    DevelopmentAuto-check: notes
  • Pretty Mermaid Renderer

    imxv/Pretty-mermaid-skills

    Writes and renders Mermaid diagrams as themed SVG, PNG or terminal ASCII and Unicode art with a bundled Node.js CLI that needs no browser.

    1.5k GitHub stars~2k tokensUpdated 1 mo ago
    DevelopmentAuto-check passed
  • Archify Diagram Builder

    Unclecheng-li/AI_Animation

    Builds validated architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone interactive HTML from a small JSON spec, with optional motion and image export.

    1.5k GitHub starsUsed in 2 repos~4.1k tokens
    DevelopmentAuto-check passed
  • Mermaid

    WH-2099/mermaid-skill

    Generate Mermaid diagrams from user requirements. An agent skill from WH-2099/mermaid-skill.

    288 GitHub starsUsed in 4 repos~958 tokens
    DevelopmentAuto-check passed

More from sickn33/agentic-awesome-skills

All 1,497 skills in this repo
  • Liuguang Banlan UI

    sickn33/agentic-awesome-skills

    Implements an interface in one of two named color modes, iridescent white or colorful black, from a parameterized starter that reports measured color intensity.

    47k GitHub starsUsed in 1 repo~2.5k tokens
    Auto-check passed
  • User Thoughts Memory

    sickn33/agentic-awesome-skills

    Saves a user's project decisions, rules and preferences into a project-local mdbase so later sessions and other agents can recover the intent.

    47k GitHub starsUsed in 1 repo~2.5k tokens
    Auto-check passed
  • Using LWC Memory and Graphs

    sickn33/agentic-awesome-skills

    Keeps project decisions, research and verified results available across coding-agent sessions through LWC memory, a document Wiki graph and a CodeGraph code index.

    47k GitHub starsUsed in 1 repo~2k tokens
    Auto-check passed
  • Find Complementary Founders

    sickn33/agentic-awesome-skills

    Guides an agent through assessing its own owner for cofounder fit, publishing an approved profile, and ranking complementary profiles other agents published for their owners.

    47k GitHub starsUsed in 1 repo~4.8k tokens
    Auto-check passed
  • Whatsapp Cloud API

    sickn33/agentic-awesome-skills

    Integracao com WhatsApp Business Cloud API (Meta). An agent skill from sickn33/agentic-awesome-skills.

    47k GitHub starsUsed in 2 repos~4.5k tokens
    Auto-check passed
  • Cline Pilot

    sickn33/agentic-awesome-skills

    Acts as a proxy for the Cline CLI, dispatching coding tasks one at a time, monitoring runs by hard evidence, relaying decisions to you and learning per-project preferences.

    47k GitHub starsUsed in 1 repo~4.6k tokens
    Auto-check passed

Works with

Categories

Questions about Diagram Generator

What does Diagram Generator do?

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…. Diagram Generator is an agent skill from sickn33/agentic-awesome-skills. 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.

When should I use Diagram Generator?

Diagram Generator fits situations like: tasks that involve Diagrams.

How do I install Diagram Generator in Claude Code?

Run `npx skills add sickn33/agentic-awesome-skills --skill diagram-generator -a claude-code`. Or copy the skill folder (skills/diagram-generator in sickn33/agentic-awesome-skills) into .claude/skills/diagram-generator in your project. Claude Code loads it when a task matches its description.

How do I install Diagram Generator in Codex?

Run `npx skills add sickn33/agentic-awesome-skills --skill diagram-generator -a codex`. Or copy the skill folder (skills/diagram-generator in sickn33/agentic-awesome-skills) into .agents/skills/diagram-generator in your project. Codex loads it when a task matches its description.

Can I use Diagram Generator in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add sickn33/agentic-awesome-skills --skill diagram-generator -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/diagram-generator, .gemini/skills/diagram-generator, .github/skills/diagram-generator and .opencode/skills/diagram-generator in your project.

What does Diagram Generator need to run?

Going by SKILL.md and its folder, Diagram Generator needs the command-line tools its instructions call (python and npm). Our summary lists: Python 3; Node.js.

Does Diagram Generator access the network?

SKILL.md names 3 domains. In commands or code: graphviz.org, plantuml.com and github.com; the agent is likely to contact these when it follows the instructions. This is read from the text; nothing was executed.

Is Diagram Generator safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Diagram Generator use?

Diagram Generator is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Diagram Generator use?

About 2.3k tokens (SKILL.md is roughly 9.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.2k tokens, read only when the agent opens those files.

What are the alternatives to Diagram Generator?

Skills that share tags, products or a category with Diagram Generator: Archify Diagrams (tt-a1i/archify, 82k stars), Diagram Design (cathrynlavery/diagram-design, 49k stars), Draw.io Diagram Studio (Agents365-ai/drawio-skill, 10k stars) and Pretty Mermaid Renderer (imxv/Pretty-mermaid-skills, 1.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Diagram Generator?

sickn33 (a GitHub user) maintains it in sickn33/agentic-awesome-skills, which has 47,405 GitHub stars. The repository holds 1,497 skills in this directory. The repository was last updated on October 9, 2026.

Source: sickn33/agentic-awesome-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.