Generates Mermaid diagrams for flowcharts, sequences, and classes. Guides color palettes, stock photos, AI image prompts, visual themes, and accessible design for presentations.
From slidevnpx claudepluginhub rhuss/cc-slidev --plugin slidevThis skill uses the workspace's default tool permissions.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Executes pre-written implementation plans: critically reviews, follows bite-sized steps exactly, runs verifications, tracks progress with checkpoints, uses git worktrees, stops on blockers.
Effective visual design combines diagrams, images, and consistent theming to create engaging, professional, accessible presentations. Master mermaid diagrams, stock photography, AI image generation, colorblind-safe palettes, and visual cohesion.
Evidence-based accessibility: This skill incorporates research-based best practices for accessible visual design. See references/presentation-best-practices.md for full guidelines.
Mermaid provides text-based diagramming that renders beautifully in Slidev and exports well.
Best for: Processes, decision trees, workflows
Basic syntax:
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[Action 1]
B -->|No| D[Action 2]
C --> E[End]
D --> E
Direction options:
graph TD - Top to bottomgraph LR - Left to rightgraph RL - Right to leftgraph BT - Bottom to topNode shapes:
graph LR
A[Rectangle]
B(Rounded)
C([Stadium])
D[[Subroutine]]
E[(Database)]
F((Circle))
G>Flag]
H{Diamond}
I{{Hexagon}}
Arrow types:
graph LR
A-->B %% Solid arrow
C-.->D %% Dotted arrow
E==>F %% Thick arrow
G-.-H %% Dotted line
I---J %% Solid line
Edge labels:
graph LR
A -->|Label text| B
B -.->|Another label| C
Best for: API calls, interactions, communication flows
sequenceDiagram
participant Client
participant Server
participant Database
Client->>Server: HTTP Request
Server->>Database: Query
Database-->>Server: Results
Server-->>Client: HTTP Response
Message types:
-> Solid line--> Dotted line->> Solid arrow-->> Dotted arrowActivation boxes:
sequenceDiagram
Client->>+Server: Request
Server->>+Database: Query
Database-->>-Server: Data
Server-->>-Client: Response
Notes:
sequenceDiagram
Client->>Server: Request
Note right of Server: Processing
Server->>Database: Query
Note over Client,Server: Communication
Best for: Object-oriented design, data models, architecture
classDiagram
class User {
+String name
+String email
+login()
+logout()
}
class Order {
+int orderId
+Date date
+calculateTotal()
}
User "1" --> "*" Order : places
Relationships:
<|-- Inheritance*-- Compositiono-- Aggregation--> Association-- Link..|> Realization.. DependencyVisibility:
+ Public- Private# Protected~ PackageBest for: State machines, lifecycle, status changes
stateDiagram-v2
[*] --> Draft
Draft --> Review
Review --> Approved
Review --> Rejected
Rejected --> Draft
Approved --> Published
Published --> [*]
With descriptions:
stateDiagram-v2
[*] --> Idle
Idle --> Processing : Start
Processing --> Complete : Success
Processing --> Error : Failure
Error --> Idle : Retry
Complete --> [*]
Best for: Database schemas, data relationships
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
PRODUCT ||--o{ LINE-ITEM : includes
CUSTOMER {
string name
string email
int customerId
}
ORDER {
int orderId
date orderDate
float total
}
Relationship types:
||--|| One to one||--o{ One to many}o--o{ Many to many||--o| Zero or oneBest for: Timelines, project schedules, roadmaps
gantt
title Project Timeline
dateFormat YYYY-MM-DD
section Phase 1
Task 1 :a1, 2024-01-01, 30d
Task 2 :after a1, 20d
section Phase 2
Task 3 :2024-02-01, 25d
Task 4 :2024-02-15, 20d
Apply consistent colors:
%%{init: {'theme':'base', 'themeVariables': {
'primaryColor':'#3b82f6',
'primaryTextColor':'#fff',
'primaryBorderColor':'#2563eb',
'lineColor':'#6b7280',
'secondaryColor':'#8b5cf6',
'tertiaryColor':'#f59e0b'
}}}%%
graph TD
A[Start] --> B[Process]
B --> C[End]
Theme presets:
default - Standard colorsdark - Dark modeforest - Green tonesneutral - Grayscalebase - Customizable (use themeVariables)Process or workflow? → Flowchart
System interaction? → Sequence Diagram
Data structure? → Class or ER Diagram
State changes? → State Diagram
Timeline or schedule? → Gantt Chart
Complex architecture? → Component + Flowchart
Relevance:
Quality:
Tone:
Diversity:
Concept-based searches:
Color-specific searches:
Orientation searches:
Quality indicators:
Similar to Unsplash, good backup source:
Include in presenter notes or final slide:
<!--
Image credits:
- Photo by [Photographer Name] on Unsplash
- https://unsplash.com/photos/[photo-id]
-->
Before using:
Tools:
convert input.jpg -resize 1920x1080 output.jpgStructure:
[Subject] + [Style] + [Composition] + [Colors] + [Details] + [Quality]
Examples:
Technical presentation:
Isometric illustration of cloud infrastructure, interconnected servers
and databases, modern tech style, blue and purple gradient, clean
minimal design, high detail, professional quality
Business presentation:
Professional photograph of diverse business team in modern office,
collaborating around laptop, natural lighting, corporate environment,
blue and gray tones, shallow depth of field, high resolution
Data visualization:
Abstract data visualization, flowing connections and nodes,
information network concept, gradient from blue to cyan,
dark background, glowing elements, futuristic style, 16:9 ratio
Best practices:
Structure:
/imagine [description] --ar 16:9 --v 6 --style [style]
Examples:
Concept illustration:
/imagine neural network visualization, interconnected nodes and
pathways, abstract tech concept, electric blue and cyan,
dark background, volumetric lighting --ar 16:9 --v 6 --style raw
Architectural diagram:
/imagine microservices architecture diagram, isometric view,
containerized applications, kubernetes cluster, technical illustration,
blue white color scheme, clean lines --ar 16:9 --v 6
Parameters:
--ar 16:9 Aspect ratio for slides--v 6 Version 6 (latest)--style raw Less artistic, more literal--q 2 Quality (1-2, higher = better)--s 50 Stylization (0-1000, lower = literal)Positive prompt:
professional business chart visualization, clean modern design,
blue gradient background, data analytics concept, high quality,
detailed, 4k resolution, trending on artstation
Negative prompt:
blurry, low quality, text, watermark, signature, distorted,
ugly, bad anatomy, poorly drawn
Settings:
Do:
Don't:
Corporate/Professional:
Primary: #1e40af (Deep Blue)
Secondary: #6b7280 (Gray)
Accent: #3b82f6 (Bright Blue)
Background: #ffffff (White)
Text: #1f2937 (Dark Gray)
Tech/Modern:
Primary: #3b82f6 (Blue)
Secondary: #8b5cf6 (Purple)
Accent: #06b6d4 (Cyan)
Background: #0f172a (Dark Navy)
Text: #f8fafc (Light)
Academic/Formal:
Primary: #1e3a8a (Navy)
Secondary: #991b1b (Maroon)
Accent: #92400e (Brown)
Background: #fef3c7 (Cream)
Text: #1c1917 (Black)
Creative/Energetic:
Primary: #dc2626 (Red)
Secondary: #f59e0b (Amber)
Accent: #8b5cf6 (Purple)
Background: #ffffff (White)
Text: #18181b (Black)
Complementary: Opposite on color wheel
Analogous: Adjacent on color wheel
Monochromatic: Variations of single hue
Triadic: Three equally spaced colors
Diagrams: Use theme colors in all mermaid diagrams Images: Apply filters or overlays to match palette Backgrounds: Stick to theme backgrounds throughout Text: Consistent heading and body colors Icons: Single style (outline vs filled), matching colors
Styles:
Sources:
Consistency rules:
Divide slide into 3x3 grid:
Distribute elements evenly:
Guide viewer's eye:
Create visual hierarchy:
Ensure readability:
---
background: './image.jpg'
class: text-center
---
<div class="backdrop-blur-sm bg-black/50 p-8">
<h1 class="text-white text-6xl font-bold">
Readable Title
</h1>
</div>
Techniques:
Image + text side-by-side:
---
layout: image-right
image: './diagram.png'
---
# Content Here
- Point 1
- Point 2
- Point 3
Balance:
Title (H1): 44-60pt
Subtitle (H2): 32-40pt
Section (H3): 24-32pt
Body: 18-24pt
Caption: 14-18pt
Primary: Headlines, key data
Secondary: Subheadings, supporting text
Tertiary: Captions, notes
Neutral: Body text, backgrounds
Bold: Titles, emphasis, CTAs
Regular: Body text, most content
Light: Captions, metadata, fine print
✅ Do:
❌ Don't:
✅ Do:
❌ Don't:
✅ Do:
❌ Don't:
✅ Do:
❌ Don't:
Flowchart: graph TD
Sequence: sequenceDiagram
Class: classDiagram
State: stateDiagram-v2
ER: erDiagram
Gantt: gantt
Blue + Orange (Recommended - Universally accessible):
primary: "#3b82f6" # Blue (trust, tech)
secondary: "#f97316" # Orange (energy, action)
neutral: "#6b7280" # Gray (backgrounds)
text: "#1f2937" # Dark gray (body text)
background: "#ffffff" # White (slide background)
# Contrast ratios:
# Blue on white: 8.6:1 ✓
# Orange on white: 3.4:1 (use for headings ≥24pt) ✓
# Text on white: 16.1:1 ✓
Purple + Teal (Professional, modern):
primary: "#8b5cf6" # Purple (creative, innovative)
secondary: "#14b8a6" # Teal (calm, balanced)
neutral: "#64748b" # Slate gray
text: "#0f172a" # Near black
background: "#ffffff" # White
Dark Mode (High contrast):
primary: "#60a5fa" # Light blue (readable on dark)
secondary: "#fbbf24" # Amber (attention)
neutral: "#475569" # Slate (dividers)
text: "#f1f5f9" # Light gray (body text)
background: "#0f172a" # Very dark blue
# Note: Dark mode requires ≥7:1 contrast for text
Verification checklist:
For advanced mermaid syntax and visual design principles, consult the Mermaid documentation (https://mermaid.js.org/) and design resources like Refactoring UI.