i-diagram

Files (7)

• ATTRIBUTION.md
• SKILL.md
• architecture.md · references/
• flowchart.md · references/
• sequence.md · references/
• structural.md · references/
• main.ts · scripts/

SKILL.md (first lines)

# Diagram Generator

Create professional SVG diagrams across multiple diagram types. All output is a single self-contained `.svg` file with embedded styles and fonts.

## Theme Selection

Two themes are supported: **light** (default) and **dark**.

- Use the **light** theme unless the user explicitly asks for dark (e.g. "暗色" "深色主题" "dark mode" "dark theme")
- All colors in this document are defined as **theme tokens** — pick the column matching the selected theme and use those literals consistently throughout the SVG
- Never mix tokens from both themes in one diagram

## Supported Diagram Types

| Type | When to Use | Key Characteristics |
|------|-------------|-------------------|
| **Architecture** | System components & relationships | Grouped boxes, connection arrows, region boundaries |
| **Flowchart** | Decision logic, process steps | Diamond decisions, rounded step boxes, directional flow |
| **Sequence** | Time-ordered interactions between actors | Vertical lifelines, horizontal messages, activation bars |
| **Structural** | Class diagrams, ER diagrams, org charts | Compartmented boxes, typed relationships (inheritance, composition) |
| **Mind Map** | Brainstorming, topic exploration | Central node, radiating branches, organic layout |
| **Timeline** | Chronological events | Horizontal/vertical axis, event markers, period spans |
| **Illustrative** | Conceptual explanations, comparisons | Free-form layout, icons, annotations, visual metaphors |
| **State Machine** | State transitions, lifecycle | Rounded state nodes, labeled transitions, start/end markers |
| **Data Flow** | Data transformation pipelines | Process bubbles, data stores, external entities |

## Design System

All colors below are **theme tokens**. After selecting the theme, substitute every token with its literal value from the matching column. Token placeholders like `{bg}`, `{text}`, `{line}` appear in code snippets throughout this document and the reference files.

### Base Tokens

| Token | Light (default) | Dark | Use For |
|-------|-----------------|------|---------|
| `{bg}` | `#f8fafc` | `#0f172a` | Canvas background, masking rects |
| `{grid}` | `#e2e8f0` | `#1e293b` | Background grid lines |
| `{text}` | `#0f172a` | `white` | Primary labels, component names |
| `{text-sub}` | `#64748b` | `#94a3b8` | Sublabels, descriptions, annotations |
| `{text-msg}` | `#334155` | `#e2e8f0` | Message/arrow labels |
| `{line}` | `#64748b` | `#64748b` | Default arrows, connection lines |
| `{line-soft}` | `#94a3b8` | `#334155` | Lifelines, dividers, subtle lines |

### Color Palette

Semantic colors for component categories:

| Category | Light Fill | Light Stroke | Dark Fill | Dark Stroke | Use For |
|----------|------------|--------------|-----------|-------------|---------|
| Primary | `rgba(207, 250, 254, 0.7)` | `#0891b2` | `rgba(8, 51, 68, 0.4)` | `#22d3ee` | Frontend, user-facing, inputs |
| Secondary | `rgba(209, 250, 229, 0.7)` | `#059669` | `rgba(6, 78, 59, 0.4)` | `#34d399` | Backend, services, processing |
| Tertiary | `rgba(237, 233, 254, 0.7)` | `#7c3aed` | `rgba(76, 29, 149, 0.4)` | `#a78bfa` | Database, storage, persistence |
| Accent | `rgba(254, 243, 199, 0.6)` | `#d97706` | `rgba(120, 53, 15, 0.3)` | `#fbbf24` | Cloud, infrastructure, regions |
| Alert | `rgba(255, 228, 230, 0.7)` | `#e11d48` | `rgba(136, 19, 55, 0.4)` | `#fb7185` | Security, errors, warnings |
| Connector | `rgba(255, 237, 213, 0.6)` | `#ea580c` | `rgba(251, 146, 60, 0.3)` | `#fb923c` | Buses, queues, middleware |
| Neutral | `rgba(241, 245, 249, 0.8)` | `#64748b` | `rgba(30, 41, 59, 0.5)` | `#94a3b8` | External, generic, unknown |
| Highlight | `rgba(219, 234, 254, 0.7)` | `#2563eb` | `rgba(59, 130, 246, 0.3)` | `#60a5fa` | Active state, focus, current step |

In snippets, `FILL` / `STROKE` refer to the selected category's fill/stroke in the active theme. When a snippet hardcodes a category color (e.g. a cyan stroke), translate it to the same category's value in the active theme.

For flowcharts and sequence diagrams, assign colors by role (actor, decision, process) rather than by technology.

### Typography

Use embedded SVG `@font-face` or system monospace fallback:

```svg
<style>
  @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&amp;display=swap');
  text { font-family: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace; }
</style>
```

Font sizes by role:
- **Title:** 16px, weight 700, color `{text}`
- **Component name:** 11-12px, weight 600, color `{text}`
- **Sublabel / description:** 9px, weight 400, color `{text-sub}`
- **Annotation / note:** 8px, weight 400
- **Tiny label (on arrows):** 7-8px

### Core Visual Elements

**Background:** `{bg}` with subtle grid:
```svg
<defs>
  <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="{grid}" stroke-width="0.5"/>
  </pattern>
</defs>
<rect width="100%" height="100%" fill="{bg}"/>
<rect width="100%" height="100%" fill="url(#grid)"/>
```

**Arrowhead marker (standard):**
```svg
<marker id="arrow" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  <polygon points="0 0, 10 3.5, 0 7" fill="{line}"/>
</marker>
```

**Arrowhead marker (colored) — create per-color as needed, using the category stroke for the active theme:**
```svg
<marker id="arrow-primary" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  <polygon points="0 0, 10 3.5, 0 7" fill="STROKE"/>
</marker>
```

**Open arrowhead (for async/return messages):**
```svg
<marker id="arrow-open" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  <polyline points="0 0, 10 3.5, 0 7" fill="none" stroke="{line}" stroke-width="1.5"/>
</marker>
```

### SVG Structure & Layering

Draw elements in this order to get correct z-ordering (SVG paints back-to-front):

1. Background fill + grid pattern
2. Region/group boundaries (dashed outlines)

From jtsang4/efficient-coding, MIT.

More from jtsang4/efficient-coding