Claude 3.5 Sonnet uses Mermaid to create diagrams, you can edit Mermaid files here.

Jump to Diagrams

If you want to save the diagram as a file (svg, png) you can use the Mermaid online editor. Paste your code into the code editor then click Actions in the left menu and select the button corresponding to the image type you would like to download.

Prompt

User: What type of diagrams can you make?

Claude:

I can create several types of diagrams using Mermaid syntax. Here are some of the main diagram types I can generate:

1. Flowcharts
2. Sequence diagrams
3. Class diagrams
4. State diagrams
5. Entity-Relationship diagrams (ERDs)
6. Gantt charts
7. Pie charts
8. User journey diagrams

Would you like me to provide an example of any of these diagram types? I can create one as an artifact that you can view and potentially modify.

User: Provide an example of each

Diagrams

graph TD
    A[Start] --> B{Is it raining?}
    B -->|Yes| C[Take an umbrella]
    B -->|No| D[Enjoy the weather]
    C --> E[Go outside]
    D --> E
    E --> F[End]

sequenceDiagram
    participant User
    participant Website
    participant Database
    User->>Website: Login request
    Website->>Database: Query user data
    Database-->>Website: Return user data
    Website-->>User: Login response

classDiagram
    class Animal {
        +name: string
        +age: int
        +makeSound(): void
    }
    class Dog {
        +breed: string
        +bark(): void
    }
    class Cat {
        +color: string
        +meow(): void
    }
    Animal <|-- Dog
    Animal <|-- Cat

stateDiagram-v2
    [*] --> Idle
    Idle --> Playing: Play
    Playing --> Paused: Pause
    Paused --> Playing: Resume
    Paused --> Stopped: Stop
    Playing --> Stopped: Stop
    Stopped --> [*]

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ ORDER_ITEM : contains
    PRODUCT ||--o{ ORDER_ITEM : "ordered in"

gantt
    title A Simple Gantt Chart
    dateFormat  YYYY-MM-DD
    section Project A
    Task 1           :a1, 2023-01-01, 30d
    Task 2           :after a1, 20d
    section Project B
    Task 3           :2023-02-01, 12d
    Task 4           :24d

pie title Favorite Fruits
    "Apples" : 40
    "Bananas" : 30
    "Oranges" : 20
    "Grapes" : 10

journey
    title My Working Day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me