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 bottom
• graph LR - Left to right
• graph RL - Right to left
• graph 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
• *-- Composition
• o-- 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 colors
• dark - Dark mode
• forest - Green tones
• neutral - Grayscale
• base - 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 cha

...