🇺🇸English
Visual Design for Presentations
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 Diagrams
Mermaid provides text-based diagramming that renders beautifully in Slidev and exports well.
Flowcharts
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 top
Node 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
Sequence Diagrams
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 arrow
Activation 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
Class Diagrams
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.. Dependency
Visibility:
+ Public- Private# Protected~ Package
State Diagrams
Best 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 --> [*]
ER Diagrams
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 one
Gantt Charts
Best 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
Theming Diagrams
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)
Diagram Selection Guide
Process or workflow? → Flowchart
- Shows steps and decisions
- Linear or branching paths
- Start and end points clear
System interaction? → Sequence Diagram
- Shows communication between components
- Time-ordered messages
- Request/response patterns
Data structure? → Class or ER Diagram
- Shows entities and relationships
- Object-oriented design
- Database schema
State changes? → State Diagram
- Shows status transitions
- Lifecycle representation
- Finite states
Timeline or schedule? → Gantt Chart
- Shows tasks over time
- Dependencies and milestones
- Project planning
Complex architecture? → Component + Flowchart
- Multiple diagram types
- Different abstraction levels
- Layered view
Stock Photography
Image Selection Criteria
Relevance:
- Directly related to slide content
- Reinforces message
- Doesn't distract
Quality:
- Minimum 1920x1080 resolution
- Sharp, well-lit
- Professional composition
Tone:
- Matches presentation style
- Appropriate for audience
- Consistent emotional impact
Diversity:
- Inclusive representation
- Varied perspectives
- Authentic, not staged
Unsplash Search Strategies
Concept-based searches:
- "team collaboration"
- "data visualization"
- "technology innovation"
- "business meeting"
- "cloud computing abstract"
Color-specific searches:
- "blue technology"
- "minimal white background"
- "dark professional"
Orientation searches:
- Add "landscape" for 16:9 slides
- Add "portrait" for split layouts
Quality indicators:
- High view count
- Professional photographer
- Editorial collection
Pexels Alternative
Similar to Unsplash, good backup source:
- Free for commercial use
- No attribution required (but appreciated)
- Good for videos too
Attribution
Include in presenter notes or final slide:
<!--
Image credits:
- Photo by [Photographer Name] on Unsplash
- https://unsplash.com/photos/[photo-id]
-->
Image Optimization
Before using:
- Resize to 1920x1080 maximum
- Compress to reduce file size
- Save in appropriate format (JPG for photos, PNG for graphics)
Tools:
- ImageMagick:
convert input.jpg -resize 1920x1080 output.jpg
- Online: TinyPNG, Squoosh
AI Image Generation
DALL-E 3 Prompting
Structure:
[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:
- Be specific about style (photo, illustration, 3D render)
- Specify aspect ratio (16:9 for slides)
- Include lighting details for realism
- Mention color palette for consistency
- Add quality descriptors (high detail, professional)
Midjourney Prompting
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)
Stable Diffusion Prompting
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:
- Steps: 30-50
- CFG Scale: 7-12
- Size: 1024x576 (16:9) or 1920x1080
AI Image Best Practices
Do:
- Generate multiple variations
- Iterate on prompts
- Specify technical requirements
- Match presentation theme
- Use consistent style across slides
Don't:
- Use first result without review
- Mix incompatible styles
- Include text in AI images (often garbled)
- Over-complicate prompts
- Ignore licensing terms
Visual Theme Development
Color Palettes
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)
Color Theory
Complementary: Opposite on color wheel
- High contrast
- Energetic feel
- Use sparingly
Analogous: Adjacent on color wheel
- Harmonious
- Pleasing to eye
- Professional look
Monochromatic: Variations of single hue
- Cohesive
- Sophisticated
- Easy to execute
Triadic: Three equally spaced colors
- Vibrant
- Balanced
- Needs careful use
Applying Theme Consistency
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
Icon Systems
Styles:
- Outline (modern, clean)
- Filled (bold, impactful)
- Flat (minimalist)
- 3D (depth, realistic)
Sources:
- Heroicons (outline/filled, free)
- Feather Icons (minimalist, free)
- Font Awesome (comprehensive, free tier)
- Material Icons (Google, free)
Consistency rules:
- Single icon style per presentation
- Consistent size (e.g., all 24px)
- Theme-matched colors
- Same stroke weight
Visual Composition
Rule of Thirds
Divide slide into 3x3 grid:
- Place important elements at intersections
- Align content along grid lines
- Creates balanced, professional look
Visual Weight
Distribute elements evenly:
- Heavy elements (images, dark colors) balance with light elements
- Symmetrical or asymmetrical balance
- Avoid one heavy corner
Focal Point
Guide viewer's eye:
- Size: Larger elements draw attention
- Color: Bright or contrasting colors stand out
- Position: Center or rule-of-thirds points
- Isolation: White space around element
Contrast
Create visual hierarchy:
- Light vs dark
- Large vs small
- Bold vs thin
- Color vs grayscale
Image + Text Integration
Text Overlays on Images
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:
- Dark overlay (30-70% opacity)
- Blur background behind text
- Position text in clear area
- Add drop shadow to text
Split Layouts
Image + text side-by-side:
---
layout: image-right
image: './diagram.png'
---
# Content Here
- Point 1
- Point 2
- Point 3
Balance:
- Equal visual weight on each side
- Complementary content
- Clear relationship between image and text
Visual Hierarchy
Size Hierarchy
Title (H1): 44-60pt
Subtitle (H2): 32-40pt
Section (H3): 24-32pt
Body: 18-24pt
Caption: 14-18pt
Color Hierarchy
Primary: Headlines, key data
Secondary: Subheadings, supporting text
Tertiary: Captions, notes
Neutral: Body text, backgrounds
Weight Hierarchy
Bold: Titles, emphasis, CTAs
Regular: Body text, most content
Light: Captions, metadata, fine print
Best Practices (Evidence-Based)
Diagrams
✅ Do:
- Choose diagram type matching content (flowchart for process, sequence for interaction)
- Apply theme colors consistently via mermaid init directive
- Keep diagrams simple (max 7-9 nodes - cognitive load research)
- Label clearly with readable font sizes (match slide minimum 18pt)
- Use directional flow (typically left-to-right or top-to-bottom)
- Progressive disclosure for complex diagrams (build across multiple slides)
- Test colorblind-safe (use patterns/shapes + color, not color alone)
❌ Don't:
- Overcomplicate with too many connections (cognitive overload)
- Use too many colors (stick to theme palette: 2 main + 1-2 accents)
- Make text too small (minimum 18pt equivalent in diagrams)
- Create bidirectional spaghetti (unclear flow)
- Ignore alignment (clean grid-based layout)
- Rely on color alone (add labels, patterns, icons for colorblind accessibility)
Images
✅ Do:
- Use high-resolution (1920x1080+)
- Match presentation tone
- Ensure diversity and inclusion
- Provide attribution
- Optimize file size
❌ Don't:
- Use pixelated or blurry images
- Choose cliché stock photos
- Ignore licensing
- Use inconsistent styles
- Overload with images
Color (Accessibility Required)
✅ Do:
- Define palette upfront (2 main colors + 1-2 accents = 3-4 total)
- Ensure contrast ratios (from research):
- Normal text (<24pt): Minimum 4.5:1
- Large text (≥24pt): Minimum 3:1
- Test with tools: WebAIM Contrast Checker, Colorblind Web Page Filter
- Use colorblind-safe palettes :
- Use ColorBrewer (colorbrewer2.org) for verified palettes
- Common safe combinations: Blue + Orange, Purple + Green, Blue + Red
- AVOID: Red + Green (most common colorblindness)
- Don't rely on color alone :
- Add patterns in charts (stripes, dots, hatching)
- Use labels and icons alongside colors
- Differentiate with size/shape + color
- Use consistently throughout (same meaning = same color)
- Test on different displays (projector, laptop, mobile)
❌ Don't:
- Use random colors (establish theme palette first)
- Rely on color alone (excludes 8% of males with colorblindness)
- Create low contrast (<4.5:1 fails accessibility standards)
- Mix too many palettes (max 3-4 colors total)
- Ignore accessibility (legal requirement in many contexts)
- Use red+green together without additional differentiation
Theme
✅ Do:
- Establish visual identity
- Apply consistently
- Create templates
- Document color codes
- Test in different contexts
❌ Don't:
- Change style mid-presentation
- Mix incompatible aesthetics
- Ignore brand guidelines
- Over-decorate
- Sacrifice readability for style
Quick Reference
Mermaid Diagram Types
Flowchart: graph TD
Sequence: sequenceDiagram
Class: classDiagram
State: stateDiagram-v2
ER: erDiagram
Gantt: gantt
Color Palette Templates (Colorblind-Safe)
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:
- Contrast ratios verified (4.5:1+ for normal, 3:1+ for large text)
- Tested with colorblind simulator
- Colors have distinct meaning (not red/green for pass/fail)
- Patterns/icons supplement color in charts
- Palette documented for consistency
Image Checklist
- High resolution (1920x1080+)
- Relevant to content
- Matches presentation tone
- Properly attributed
- Optimized file size
- Accessible (alt text in notes)
For advanced mermaid syntax and visual design principles, consult the Mermaid documentation (https://mermaid.js.org/) and design resources like Refactoring UI.
Weekly Installs
–
Repository
rhuss/cc-slidev
GitHub Stars
17
First Seen
–
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
