From diagram
Generate diagrams in ASCII or Mermaid formats. Auto-selects format based on context, or accepts explicit format parameter. Use for flowcharts, sequence diagrams, architecture diagrams, state machines, Gantt charts, ERDs, user journeys, or any visual representation needs.
npx claudepluginhub leolionart/claude-skills --plugin diagramThis skill uses the workspace's default tool permissions.
Unified skill to generate diagrams in two formats:
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Unified skill to generate diagrams in two formats:
| User mentions | Selected Format |
|---|---|
mermaid, gantt, sequence, state, c4, flowchart, ERD, diagram | Mermaid |
ascii, text, monospace, console, slack, comment | ASCII |
| Ambiguous or unspecified | Default to Mermaid |
User can specify format directly:
Best for: Slack, GitHub comments, code comments, email, plain text environments.
Box Characters:
┌ ─ ┐ Top corners & horizontal
│ │ Vertical sides
└ ─ ┘ Bottom corners
╭ ─ ╮ Rounded corners
╰ ─ ╯
╔ ═ ╗ Double border (emphasis)
╚ ═ ╝
Arrows:
→ ← ↑ ↓ Directional
↔ ↕ Bidirectional
⇒ ⇐ Bold
Connectors:
├ ┤ ┬ ┴ T-junctions
┼ Cross
Symbols:
✓ ✗ Check/X
★ ☆ Star
● ○ Circle
┌─────────┐ ┌──────────┐ ┌─────────┐
│ Start │ ──→ │ Process │ ──→ │ End │
└─────────┘ └──────────┘ └─────────┘
┌─────────┐
│ Valid? │
└────┬────┘
┌──┴──┐
Yes│ │No
↓ ↓
┌────────┐ ┌────────┐
│ Save │ │ Error │
└────────┘ └────────┘
┌──────────────┐
│ Frontend │ (React)
└──────┬───────┘
│ HTTPS
↓
┌──────────────┐
│ Backend │ (Node.js)
└───┬──────┬───┘
│ │
↓ ↓
┌─────────┐ ┌──────────┐
│ DB │ │ Cache │
│(Postgres)│ │ (Redis) │
└─────────┘ └──────────┘
Best for: GitHub, Notion, Confluence, GitLab, Obsidian - anywhere Mermaid renders.
| Type | Syntax Start | Use Case |
|---|---|---|
| Flowchart | flowchart TD | Processes, user flows |
| Sequence | sequenceDiagram | API interactions, service calls |
| State | stateDiagram-v2 | Object lifecycles, statuses |
| User Journey | journey | Experience mapping with sentiment |
| C4 | C4Context | System architecture |
| Gantt | gantt | Project timelines, roadmaps |
| ERD | erDiagram | Database schemas |
Flowchart:
flowchart TD
A[Start] --> B{Decision?}
B -->|Yes| C[Action A]
B -->|No| D[Action B]
Sequence Diagram:
sequenceDiagram
User->>API: Request
API->>Database: Query
Database-->>API: Result
API-->>User: Response
State Diagram:
stateDiagram-v2
[*] --> Idle
Idle --> Loading: submit
Loading --> Success: complete
Success --> [*]
Gantt Chart:
gantt
title Project Timeline
dateFormat YYYY-MM-DD
Task 1: t1, 2025-01-01, 7d
Task 2: t2, after t1, 5d
dateFormat YYYY-MM-DD for Ganttafter [task_id] for dependenciesreferences/syntax-reference.md - Complete syntax for all typesreferences/optimization-rules.md - Rendering and styling guidelinesreferences/examples.md - Practice exercises and patternsconfluence-publishing: Publish Mermaid/ASCII diagrams to Confluenceui-design-guide: Design guidelines for visual consistency