Diagram Examples

This page demonstrates the diagramming options available for PromptKit documentation.

Mermaid Diagrams

Mermaid is great for flowcharts, sequence diagrams, and state diagrams.

Flowchart

flowchart LR
    A[User Request] --> B{Router}
    B --> C[Provider A]
    B --> D[Provider B]
    C --> E[Response]
    D --> E

Sequence Diagram

sequenceDiagram
    participant App
    participant SDK
    participant Provider
    participant LLM

    App->>SDK: conv.Send(ctx, message)
    SDK->>Provider: CreateChatCompletion
    Provider->>LLM: API Request
    LLM-->>Provider: Response
    Provider-->>SDK: Completion
    SDK-->>App: Response

Block Diagram (Beta)

block-beta
  columns 3

  A["YAML Sources"] --> B["PackC Compiler"] --> C[".pack.json"]

D2 Diagrams

D2 excels at architecture and block diagrams with nested containers.

Simple Flow

Layered Architecture

Component Diagram

With Styling

When to Use Each

Diagram Type	Best For
Mermaid Flowchart	Simple process flows, decision trees
Mermaid Sequence	API interactions, message passing
Mermaid State	State machines, lifecycle diagrams
D2 Block	Layered architecture, nested components
D2 Component	System overviews, module relationships

Syntax Reference

• Mermaid: mermaid.js.org
• D2: d2lang.com