Detalle del Skill

diagram-generator

Generates architecture and system diagrams using Mermaid and HTML.

CoincidenciaDirectaRevisado para diagrama de arquitectura

Fuenteoimiragieo/agent-studioFuente externa

Instalaciones reportadas142Solo señal de popularidad

Revisar antes de usar

La revisión automática comprueba relevancia, no seguridad ni respaldo. Lee las instrucciones de la fuente antes de usar este Skill.

Ver en skills.sh (abre una página externa)Leer SKILL.md en GitHub (abre una página externa)

Vista previa guardada

SKILL.md

Este extracto es una copia guardada durante la revisión. La fuente externa contiene la versión completa y actual.

---
name: diagram-generator
description: 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.
version: 1.4.0
model: sonnet
invoked_by: both
user_invocable: true
tools: [Read, Write, Glob, Grep]
best_practices:
  - Use Mermaid syntax for all diagrams
  - Extract structure from code and documentation
  - Keep diagrams under 200 nodes
  - Generate both high-level and detailed views
error_handling: graceful
streaming: supported
templates: [architecture-diagram, database-diagram, component-diagram, sequence-diagram]
verified: true
lastVerifiedAt: 2026-03-15T00:00:00.000Z
source: builtin
trust_score: 100
provenance_sha: be44b78f364f1c89
---

<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):

```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;
      }
    </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

```bash
# Identify components to diagram
pnpm search:

Leer la fuente completa en GitHub

Contexto