Diagram Generator

Name: Diagram Generator
Author: oimiragieo

oimiragieo/agent-studio

141 installs
36 repo stars
Updated July 14, 2026
oimiragieo/agent-studio

Produce architecture, sequence, and flow diagrams while documenting systems, onboarding engineers, or explaining designs in PRs and wikis.

About

diagram-generator helps agents translate system structure, data flows, and component relationships into clear diagrams during documentation work. It reduces the friction of visual explanation in READMEs, design notes, and PR descriptions so technical decisions stay understandable as the codebase grows.

Architecture and sequence diagrams
Flowcharts from code context
Embed-ready documentation visuals
Speeds onboarding and ADRs
Keeps docs synchronized with build

Diagram Generator by the numbers

141 all-time installs (skills.sh)
+4 installs in the week ending Aug 4, 2026 (Skillselion tracking)
Ranked #584 of 1,879 Documentation skills by installs in the Skillselion catalog
Data as of Aug 4, 2026 (Skillselion catalog sync)

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

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/oimiragieo/agent-studio/diagram-generator.svg)](https://skillselion.com/skills/oimiragieo/agent-studio/diagram-generator)

Installs	141
repo stars	★ 36
Last updated	July 14, 2026
Repository	oimiragieo/agent-studio ↗

What it does

Produce architecture, sequence, and flow diagrams while documenting systems, onboarding engineers, or explaining designs in PRs and wikis.

Files

SKILL.mdMarkdownGitHub ↗

<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

1. Mermaid syntax only — no ASCII art or PlantUML. 2. Never exceed 200 nodes per diagram. 3. Never write diagrams outside .claude/context/artifacts/diagrams/. 4. Label all non-obvious connections. 5. 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.

#!/usr/bin/env node

/**
 * diagram-generator - Post-Execute Hook
 * Runs after the skill executes for cleanup, logging, or follow-up actions.
 */

const fs = require('fs');
const path = require('path');
const { safeParseJSON } = require('../../../lib/utils/safe-json.cjs');

// Parse hook input
const result = safeParseJSON(process.argv[2] || '{}');

console.log('📝 [DIAGRAM-GENERATOR] Post-execute processing...');

/**
 * Process execution result
 */
function processResult(_result) {
  // TODO: Add your post-processing logic here

  return { success: true };
}

// Run post-processing
const outcome = processResult(result);

if (outcome.success) {
  console.log('✅ [DIAGRAM-GENERATOR] Post-processing complete');
  process.exit(0);
} else {
  console.error('⚠️  [DIAGRAM-GENERATOR] Post-processing had issues');
  process.exit(0);
}

#!/usr/bin/env node

/**
 * diagram-generator - Pre-Execute Hook
 * Runs before the skill executes to validate input or prepare context.
 */

const fs = require('fs');
const path = require('path');
const { safeParseJSON } = require('../../../lib/utils/safe-json.cjs');

// Parse hook input
const input = safeParseJSON(process.argv[2] || '{}');

console.log('🔍 [DIAGRAM-GENERATOR] Pre-execute validation...');

/**
 * Validate input before execution
 */
function validateInput(_input) {
  const errors = [];

  // TODO: Add your validation logic here

  return errors;
}

// Run validation
const errors = validateInput(input);

if (errors.length > 0) {
  console.error('❌ Validation failed:');
  errors.forEach(e => console.error('   - ' + e));
  process.exit(1);
}

console.log('✅ [DIAGRAM-GENERATOR] Validation passed');
process.exit(0);

{
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "title": "diagram-generator Input Schema",
  "description": "Input validation schema for diagram-generator skill",
  "type": "object",
  "required": [],
  "properties": {},
  "additionalProperties": true
}

{
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "title": "diagram-generator Output Schema",
  "description": "Output validation schema for diagram-generator skill",
  "type": "object",
  "required": ["success"],
  "properties": {
    "success": {
      "type": "boolean",
      "description": "Whether the skill executed successfully"
    },
    "result": {
      "type": "object",
      "description": "The skill execution result",
      "additionalProperties": true
    },
    "error": {
      "type": "string",
      "description": "Error message if execution failed"
    }
  },
  "additionalProperties": true
}

#!/usr/bin/env node

/**
 * Diagram Generator - Main Script
 * Generates architecture, database, and system diagrams using Mermaid syntax. Creates visual representations of system architecture, database schemas, component relationships, and data flows.
 *
 * Usage:
 *   node main.cjs [options]
 *
 * Options:
 *   --help     Show this help message
 */

const fs = require('fs');
const path = require('path');
const { spawn } = require('child_process');

// Find project root
function findProjectRoot() {
  let dir = __dirname;
  while (dir !== path.parse(dir).root) {
    if (fs.existsSync(path.join(dir, '.claude'))) {
      return dir;
    }
    dir = path.dirname(dir);
  }
  return process.cwd();
}

const PROJECT_ROOT = findProjectRoot();

// Parse command line arguments
const args = process.argv.slice(2);
const options = {};
for (let i = 0; i < args.length; i++) {
  if (args[i].startsWith('--')) {
    const key = args[i].slice(2);
    const value = args[i + 1] && !args[i + 1].startsWith('--') ? args[++i] : true;
    options[key] = value;
  }
}

/**
 * Main execution
 */
function main() {
  if (options.help) {
    console.log(`
Diagram Generator - Main Script

Usage:
  node main.cjs [options]

Options:
  --help     Show this help message
`);
    process.exit(0);
  }

  const generatePath = path.join(
    PROJECT_ROOT,
    '.claude',
    'tools',
    'visualization',
    'diagram-generator',
    'scripts',
    'generate.mjs'
  );
  if (!fs.existsSync(generatePath)) {
    console.error('Diagram generator not found:', generatePath);
    process.exit(1);
  }
  const child = spawn(process.execPath, [generatePath, ...args], {
    stdio: 'inherit',
    cwd: PROJECT_ROOT,
    windowsHide: true,
  });
  child.on('close', code => process.exit(code !== null && code !== undefined ? code : 1));
}

main();

Related skills

Lark MarkdownInstantly turn any markdown file into clean, formatted Lark/Figma-compatible documents without manual reformatting.488k

Lark DocCreate, read, update, summarize, rewrite and manage Feishu/Lark cloud documents directly from agent workflows.401k16.1k

Lark WikiCreate, organize, query, and manage documents, spaces, and members inside Lark (Feishu) knowledge bases directly from AI agent workflows.397k16.1k

Domain ModelingBuild and sharpen a project's domain model: pin down domain terminology in a glossary and record architectural decisions as ADRs.318k202k

Opensource Guide CoachGet expert, attribution-safe guidance on launching and sustaining an open-source project.270k71

Readme I18nMaintain consistent, updatable language selector blocks across every README variant in a multilingual repository.270k71

Documentationdocsintegrationsfrontend

Diagram Generator

About

Diagram Generator by the numbers

Add your badge

What it does

Files

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

diagram-generator Research Requirements

Skill Description

Research Areas

Source References

diagram-generator Rules

Purpose

Best Practices

Integration Points

diagram-generator Implementation Template

Goal

TDD

Verification

Related skills

About

Diagram Generator by the numbers

Add your badge

What it does

Files

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

diagram-generator Research Requirements

Skill Description

Research Areas

Source References

diagram-generator Rules

Purpose

Best Practices

Integration Points

diagram-generator Implementation Template

Goal

TDD

Verification

Related skills

This week in AI coding