diagram-generator

Q: How do I install diagram-generator?

Run npx skills add https://github.com/oimiragieo/agent-studio --skill diagram-generator in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/diagram-generator/ (personal) or .claude/skills/diagram-generator/ (project).

by oimiragieoDocs & Writing

Generates architecture, database, and system diagrams using Mermaid syntax. Creates visual representations of system architecture, database schemas, component relationships, data flows, and standalone HTML exports.

Installs: 146
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/oimiragieo/agent-studio --skill diagram-generator

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads diagram-generator automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

<identity> Diagram Generator — creates Mermaid diagrams and standalone HTML exports for architecture, schemas, flows, and all supported diagram types. </identity>

Diagram Types

Type	Keyword	Best For
Flowchart	`flowchart TB/LR`	Decision flows, processes
Sequence	`sequenceDiagram`	API interactions, protocols
Class	`classDiagram`	OOP structure, interfaces
State	`stateDiagram-v2`	Lifecycle, state machines
ER	`erDiagram`	Database schemas
Gantt	`gantt`	Project timelines
Pie	`pie`	Distribution, composition
Mindmap	`mindmap`	Hierarchical mind maps
Timeline	`timeline`	Chronological events
Git Graph	`gitGraph`	Branch visualization
Kanban	`kanban`	Task boards
Quadrant	`quadrantChart`	2x2 matrix

Processing Limits

File chunk limit: 1000 files per diagram (HARD LIMIT)
Visual limit: ~200 nodes max per diagram
Large codebases: split by subsystem/layer; generate overview first then details

Standalone HTML Output Mode

Trigger phrases: "export as HTML", "standalone diagram", "interactive diagram"

Generate a self-contained HTML file with embedded Mermaid.js CDN, dark/light toggle button, and responsive CSS (max-width: 1200px):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>TITLE</title>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <script>
      mermaid.initialize({ startOnLoad: true, theme: 'dark' });
    </script>
    <style>
      body {
        font-family: system-ui;
        max-width: 1200px;
        margin: 2rem auto;
        background: #1e1e2e;
        color: #cdd6f4;
      }
    </style>
  </head>
  <body>
    <h1>TITLE</h1>
    <button
      onclick="let d=!d;mermaid.initialize({startOnLoad:false,theme:d?'dark':'default'});document.querySelector('.mermaid').removeAttribute('data-processed');mermaid.run()"
    >
      Toggle Theme
    </button>
    <div class="mermaid">MERMAID_CONTENT</div>
  </body>
</html>

Default: dark mode (background: #1e1e2e, color: #cdd6f4) Output: .claude/context/artifacts/diagrams/{subject}-{YYYY-MM-DD}.html

Output Location

Mermaid files: .claude/context/artifacts/diagrams/{subject}-{type}-{YYYY-MM-DD}.mmd
HTML files: .claude/context/artifacts/diagrams/{subject}-{YYYY-MM-DD}.html

Iron Laws

Mermaid syntax only — no ASCII art or PlantUML.
Never exceed 200 nodes per diagram.
Never write diagrams outside .claude/context/artifacts/diagrams/.
Label all non-obvious connections.
Enforce 1000-file hard limit — chunk large codebases.

Mermaid Plugin Generation Pattern

Generate diagrams from code analysis using the Claude Code plugin pattern (ref: agentic-coding-school/mermaid-diagram-plugin):

Step 1: Analyze Codebase Structure

# Identify components to diagram
pnpm search:code "class|interface|module|service|component" | head -50

Step 2: Generate Mermaid Source

Use Claude to transform code analysis into diagram syntax. Always request a specific diagram type and scope:

"Generate a Mermaid flowchart TB of the authentication flow in src/auth/"
"Create an ER diagram for the database tables in prisma/schema.prisma"
"Make a sequence diagram for the API request lifecycle in src/api/"

Step 3: Render Interactive HTML

For standalone shareable diagrams, use the full HTML template:

// Plugin invocation pattern (from mermaid-diagram-plugin)
const mermaidContent = `
flowchart TB
  A[User Request] --> B{Auth Check}
  B -- Valid --> C[Route Handler]
  B -- Invalid --> D[401 Response]
  C --> E[Database Query]
  E --> F[Response]
`;

// Render to interactive HTML
const html = `<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>${title}</title>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <script>mermaid.initialize({ startOnLoad: true, theme: 'dark' });</script>
    <style>
      body { font-family: system-ui; max-width: 1200px; margin: 2rem auto;
             background: #1e1e2e; color: #cdd6f4; }
      .controls { margin-bottom: 1rem; }
      button { padding: 0.5rem 1rem; margin-right: 0.5rem; cursor: pointer; }
    </style>
  </head>
  <body>
    <h1>${title}</h1>
    <div class="controls">
      <button onclick="toggleTheme()">Toggle Theme</button>
      <button onclick="downloadSVG()">Download SVG</button>
    </div>
    <div class="mermaid">${mermaidContent}</div>
    <script>
      let dark = true;
      function toggleTheme() {
        dark = !dark;
        mermaid.initialize({ startOnLoad: false, theme: dark ? 'dark' : 'default' });
        document.querySelector('.mermaid').removeAttribute('data-processed');
        mermaid.run();
      }
      function downloadSVG() {
        const svg = document.querySelector('.mermaid svg');
        if (!svg) return;
        const blob = new Blob([svg.outerHTML], { type: 'image/svg+xml' });
        const a = document.createElement('a'); a.href = URL.createObjectURL(blob);
        a.download = '${title.replace(/\s+/g, '-')}.svg'; a.click();
      }
    </script>
  </body>
</html>`;

Step 4: Save Output

# Save interactive HTML to standard location
# .claude/context/artifacts/diagrams/{subject}-{YYYY-MM-DD}.html

Plugin Invocation from Agent

When an agent needs a diagram as part of a workflow:

// Invoke diagram-generator skill, then request specific type
Skill({ skill: 'diagram-generator' });

// Then describe what to diagram with context
// "Create a class diagram for src/lib/routing/ — show all classes and their relationships"

When to invoke

Skill({ skill: 'diagram-generator' }) for architecture diagrams, HTML exports, mindmaps, timelines, git visualizations, kanban boards, and quadrant charts.

FAQ

What does the diagram-generator skill do?

How do I install diagram-generator?

Run npx skills add https://github.com/oimiragieo/agent-studio --skill diagram-generator in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/diagram-generator/ (personal) or .claude/skills/diagram-generator/ (project).

Which AI agents can use diagram-generator?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is diagram-generator safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains diagram-generator?

It is published by oimiragieo in oimiragieo/agent-studio. It has 146 recorded installs.

Popular docs & writing skills

View category →

grill-with-docs

mattpocock/skills

A relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.

Docs & Writing1.2M installs

lark-markdown

open.feishu.cn

飞书 Markdown：查看、创建、上传、编辑和比较飞书中的原生 Markdown 文件。当用户要操作飞书 Markdown 文件，或比较其远端版本及本地草稿时使用。纯本地 Markdown 文件操作不触发本 skill。不负责将 Markdown 导入为飞书在线文档，也不负责文件搜索、权限、评论、移动、删除等云空间管理操作。

Docs & Writing778.7K installs

writing-beats

mattpocock/skills

Writing, exploit; assemble raw material into a journey of beats, grounding each term before a beat leans on it.

Docs & Writing490.7K installs

writing-shape

mattpocock/skills

Writing, exploit: shape raw material into an article, paragraph by paragraph.

Docs & Writing490.2K installs

writing-fragments

mattpocock/skills

Writing, explore: mine raw fragments, no structure yet.

Docs & Writing489.6K installs

writing-for-agents

mattpocock/skills

Writing documents for agents. Use when creating or editing skills, or modifying AGENTS.md or CLAUDE.md.

Docs & Writing479.3K installs

diagram-generator

Install

Install

Describe the task

Review the result

SKILL.md

Diagram Types

Processing Limits

Standalone HTML Output Mode

Output Location

Iron Laws

Mermaid Plugin Generation Pattern

Step 1: Analyze Codebase Structure

Step 2: Generate Mermaid Source

Step 3: Render Interactive HTML

Step 4: Save Output

Plugin Invocation from Agent

When to invoke

FAQ

More from oimiragieo/agent-studio

pyqt6-ui-development-rules

filesystem

chrome-browser

slack-notifications

context-compressor

nodejs-expert

Popular docs & writing skills

grill-with-docs

lark-markdown

writing-beats

writing-shape

writing-fragments

writing-for-agents