Visual Design

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