Help us improve
Share bugs, ideas, or general feedback.
From slidev
Create or improve Mermaid, PlantUML, or Excalidraw diagrams for a specific Slidev slide using content analysis and design best practices.
npx claudepluginhub rhuss/cc-slidev --plugin slidevHow this command is triggered — by the user, by Claude, or both
Slash command
/slidev:diagram <slide-number>This command is limited to the following tools:
The summary Claude sees in its command listing — used to decide when to auto-load this command
# Diagram Creation for Specific Slide Focus on creating diagrams for a specific slide with **multi-platform support** (Mermaid, PlantUML, Excalidraw) using evidence-based cognitive load limits and colorblind-safe design. **Evidence Base**: Diagram design follows research-based principles for cognitive load (max 7-9 nodes), colorblind accessibility, and visual clarity. See `references/presentation-best-practices.md` for guidelines. **Multi-Platform**: Diagrams are automatically generated in all enabled formats (configurable in `default.json` or per-presentation `slidev.config.json`). Merm...
/createCreates production-quality draw.io diagrams by analyzing project context to auto-select type, applying styles, themes, multi-page support, and layers.
/mermaid-diagramsGuides creation of syntactically valid Mermaid diagrams for product documents via type selection, planning worksheet, and syntax validation.
/generate-slidesGenerates a magazine-quality slide deck as a self-contained HTML page with narrative arc, visuals, diagrams, and varied layouts.
/diagramCreates Mermaid or ASCII diagrams for flowcharts, sequence diagrams, ERDs, C4 models, mindmaps, architecture, and more from natural language descriptions.
/create-excalidraw-diagram<!-- AUTO-GENERATED by export-plugins.py — DO NOT EDIT -->
/create-excalidraw-diagram<!-- AUTO-GENERATED by export-plugins.py — DO NOT EDIT -->
Share bugs, ideas, or general feedback.
Focus on creating diagrams for a specific slide with multi-platform support (Mermaid, PlantUML, Excalidraw) using evidence-based cognitive load limits and colorblind-safe design.
Evidence Base: Diagram design follows research-based principles for cognitive load (max 7-9 nodes), colorblind accessibility, and visual clarity. See references/presentation-best-practices.md for guidelines.
Multi-Platform: Diagrams are automatically generated in all enabled formats (configurable in default.json or per-presentation slidev.config.json). Mermaid code is embedded inline by default, with PlantUML and Excalidraw alternatives saved for flexibility.
IMPORTANT - File Organization:
.mmd, .puml, .excalidraw) → Always save to ./diagrams/.svg, .png) → Save to ./public/images/<slide-title>/CRITICAL - Embedding Rules:
Extract from $ARGUMENTS:
Find slides.md and locate slide:
Show user the slide:
## Slide [N]: [Title]
**Current Content:**
[Slide content]
**Existing Visual:** [Yes: diagram type / No]
Determine Best Platform (Mermaid vs Excalidraw vs PlantUML):
Analyze slide content to determine which platform best conveys the concept:
Use Excalidraw (invoke skill) when:
Use Mermaid (standard flow) when:
Use PlantUML when:
If Excalidraw is best fit:
CRITICAL: Excalidraw Workflow (NEVER embed JSON in markdown)
Invoke the Excalidraw Generation skill using Skill tool:
skill: "slidev:excalidraw-generation"
The skill will:
diagrams/<slug>.excalidrawpublic/images/<slug>/diagram-excalidraw.svgAdd SVG image reference to slide (NOT the JSON):

The skill takes over the complete generation process with semantic redesign approach.
If Mermaid/PlantUML is best fit, continue below:
Use visual-design skill to determine appropriate Mermaid diagram types:
Process/Workflow → Flowchart (max 7-9 nodes) System Interaction → Sequence Diagram (max 5-7 participants) Data Structure → Class/ER Diagram (max 6-8 entities) State Changes → State Diagram (max 7-9 states) Timeline → Gantt Chart (max 6-8 tasks) Architecture → Component/Deployment Diagram (max 7-9 components)
Cognitive load research: Working memory handles 7±2 items. Keep diagrams within this limit for instant comprehension.
Create 2-4 variations showing different approaches:
## Diagram Options for Slide [N]
### Option 1: Flowchart (Top-Down) ⚡
**Best for:** Showing linear process flow
**Evidence-based design:**
- **Node count**: 7 nodes (within 7±2 cognitive load limit ✓)
- **Colorblind-safe**: Blue + Orange palette (verified safe)
- **Contrast**: All text meets 4.5:1 minimum
- **Readability**: Sans-serif labels, clear arrows
**Diagram:**
```mermaid
%%{init: {'theme':'base', 'themeVariables': {
'primaryColor':'#3b82f6',
'primaryTextColor':'#fff',
'primaryBorderColor':'#2563eb',
'lineColor':'#6b7280',
'secondaryColor':'#f97316'
}}}%%
graph TD
A[Start: User Request] --> B{Validate Input}
B -->|Valid| C[Process Request]
B -->|Invalid| D[Return Error]
C --> E[Save to Database]
E --> F[Return Success]
D --> G[End]
F --> G
Element count check: Diagram = 1 element. Verify total slide elements ≤6.
Pros:
Cons:
Best for: Fitting in wide slides
Diagram:
%%{init: {'theme':'base', 'themeVariables': {'primaryColor':'#3b82f6'}}}%%
graph LR
A[Input] --> B[Validate]
B --> C[Process]
C --> D[Save]
D --> E[Output]
Pros:
Cons:
Best for: Showing interactions over time
Diagram:
sequenceDiagram
participant User
participant API
participant Database
User->>API: Request
API->>API: Validate
API->>Database: Query
Database-->>API: Data
API-->>User: Response
Pros:
Cons:
Best for: Showing status changes
Diagram:
stateDiagram-v2
[*] --> Pending
Pending --> Processing
Processing --> Success
Processing --> Error
Error --> Pending : Retry
Success --> [*]
Pros:
Cons:
Which option works best for your slide?
### 5. Generate Multi-Platform Diagram
Based on user selection, generate diagram in all enabled formats:
**Step 1: Extract slide title for directory naming**
Read the slide to get its title for creating organized storage.
**Step 2: Generate all formats using orchestration script**
```bash
${CLAUDE_PLUGIN_ROOT}/scripts/generate-multi-platform-diagram.sh \
"[Slide Title]" \
"[Mermaid Code]" \
"."
This automatically:
diagrams/ directory for source filespublic/images/<slide-title-mangled>/ directory for rendered imagesDirectory Structure:
diagrams/ # ALL sources (top-level, version controlled)
├── <slug>.mmd # Mermaid source
├── <slug>.puml # PlantUML source
└── <slug>.excalidraw # Excalidraw JSON source
public/images/<slug>/ # Rendered images only
├── diagram.svg # Mermaid rendered
├── diagram-plantuml.svg # PlantUML rendered
└── diagram-excalidraw.svg # Excalidraw rendered
NO EXCEPTIONS: Sources ALWAYS go in ./diagrams/, renders go in ./public/images/<slug>/
Step 3: Embed Mermaid inline in slide (default) Add diagram directly to slide:
# Slide Title
Content before diagram
```mermaid
[chosen diagram code with theme variables]
Remaining content
**Step 4: Show user all generated formats**
```markdown
✅ Diagram Generated for Slide [N]: [Title]
**Embedded in slide**: Mermaid (inline rendering by Slidev)
**Source files in** `diagrams/`:
- `[slug].mmd` - Mermaid source
- `[slug].puml` - PlantUML source (if enabled)
- `[slug].excalidraw` - Excalidraw JSON source (if enabled)
**Rendered images in** `public/images/[mangled-title]/`:
- `diagram.svg` - Mermaid rendered (if mmdc available)
- `diagram-plantuml.svg` - PlantUML rendered (if enabled)
- `diagram-excalidraw.svg` - Excalidraw rendered (if enabled)
**To switch formats in slide:**
Replace mermaid code block with image reference:

**To edit sources:**
- Mermaid: Edit `diagrams/[slug].mmd`
- PlantUML: Edit `diagrams/[slug].puml`
- Excalidraw: Open `diagrams/[slug].excalidraw` at https://excalidraw.com
Offer customization:
Theme Colors (Colorblind-Safe): "Should we adjust the colors to match your presentation theme?"
Apply colorblind-safe theme (Blue + Orange verified safe):
%%{init: {'theme':'base', 'themeVariables': {
'primaryColor':'#3b82f6', /* Blue - 8.6:1 contrast */
'secondaryColor':'#f97316', /* Orange - 3.4:1 (headings) */
'lineColor':'#6b7280', /* Gray - neutral */
'tertiaryColor':'#8b5cf6' /* Purple - accent */
}}}%%
Accessibility verification:
Complexity (Evidence-Based Limits): "Should we simplify (fewer nodes) or add more detail?"
Cognitive load guidance:
Adjust based on feedback while enforcing evidence-based limits.
Layout: "Should we use a different layout?"
graph TD to graph LRShow updated slide:
## Updated Slide [N]
[Full slide with new diagram]
---
**Changes:**
- Added [diagram type]
- Applied theme colors
- [Other changes]
Does this work? Any adjustments needed?
Allow iteration:
Once satisfied:
## ✅ Diagram Added to Slide [N]
**Diagram Type:** [Type]
**Rendering:** [Inline / Offline SVG]
**Theme:** [Colors applied]
**Preview:**
```bash
cd [presentation-dir]
slidev slides.md
Navigate to slide [N] to see diagram.
Edit Diagram:
Diagram code is in slides.md at slide [N].
Edit directly or run /slidev:diagram [N] again.
## Diagram Types Reference
Quick guide for user:
**Flowchart** - Processes, workflows, algorithms
- `graph TD` (top-down) or `graph LR` (left-right)
- Rectangles, diamonds (decisions), arrows
**Sequence** - API calls, interactions, message flow
- Shows temporal sequence
- Participants and messages
**Class** - Object models, data structures
- Classes with attributes/methods
- Relationships (inheritance, association)
**State** - Lifecycles, status transitions
- States and transitions
- Start/end states
**ER** - Database schemas, data relationships
- Entities and relationships
- Cardinality
**Gantt** - Timelines, schedules, roadmaps
- Tasks over time
- Dependencies
## Advanced Options
**Multiple diagrams:**
"Should we add multiple diagrams to this slide?"
- Use `two-cols` layout
- Show different perspectives
- Before/after comparison
**Interactive diagrams:**
"Want to add click animations?"
```markdown
```mermaid{click:1}
graph TD
A --> B
B --> C
**Custom styling:**
"Want to customize beyond theme colors?"
- Node shapes
- Line styles
- Icons in nodes
- Custom CSS
## Error Handling
**Diagram too complex:**
- Simplify (max 7-9 nodes recommended)
- Split into multiple diagrams
- Use higher-level abstraction
**Rendering issues:**
- Fall back to inline
- Check mermaid syntax
- Provide code for manual rendering
**Doesn't fit slide:**
- Try different layout (LR vs TD)
- Use image-right layout
- Make diagram full-slide
## Evidence-Based Diagram Quality Standards
**Cognitive Load (CRITICAL):**
- ✓ Max 7-9 nodes/elements (working memory research)
- ✓ If >9: Split into multiple diagrams or slides
- ✓ Progressive disclosure: Build complex diagrams across slides
**Accessibility (REQUIRED):**
- ✓ Colorblind-safe palette (Blue + Orange verified)
- ✓ Don't rely on color alone (use labels + shapes + patterns)
- ✓ High contrast: 4.5:1+ for all text
- ✓ Font sizes: Match slide minimum (≥18pt equivalent)
**Visual Clarity:**
- ✓ Clear directional flow (typically left-to-right or top-to-bottom)
- ✓ Consistent node naming and shapes
- ✓ Minimal crossing lines (reduce visual complexity)
- ✓ Adequate spacing between elements
**Element Count:**
- Diagram counts as **1 element** in total slide count
- Verify: diagram + bullets + other content ≤6 total elements
## Tips
- **Enforce cognitive load limit** (max 7-9 nodes, split if more)
- **Use colorblind-safe theme** (Blue #3b82f6 + Orange #f97316)
- **Don't rely on color alone** (add labels and shapes)
- **Apply theme colors consistently** for cohesion
- **Test in preview** before finalizing
- **Consider slide layout** when choosing diagram type (TD vs LR)
- **Simplify complex diagrams** (higher abstraction level or multiple slides)
Inform user diagram is complete!