ASCII Mermaid Guideline

Learn the basics of creating ASCII Mermaid diagrams. This guide covers the most commonly used diagram types with simple examples.

Basic Flowchart

Flowcharts are one of the most common diagram types. They represent processes and decision flows.

Code:

```mermaid
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[End]
    C --> D
```

ASCII Preview:

Failed to render diagram

State Diagram

State diagrams show the different states of a system and transitions between them.

Code:

```mermaid
stateDiagram-v2
    [*] --> Idle
    Idle --> Processing: start
    Processing --> Complete: done
    Complete --> [*]
```

ASCII Preview:

Failed to render diagram

Sequence Diagram

Sequence diagrams illustrate interactions between objects over time.

Code:

```mermaid
sequenceDiagram
    Alice->>Bob: Hello Bob!
    Bob-->>Alice: Hi Alice!
    Alice->>Bob: How are you?
    Bob-->>Alice: Great, thanks!
```

ASCII Preview:

Failed to render diagram

Class Diagram

Class diagrams represent object-oriented system structures. They show classes with their attributes and methods, inheritance relationships (using <|--), and associations.

Code:

```mermaid
classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal: +int age
    Animal: +String gender
    Animal: +isMammal() bool
    Animal: +mate()
    Duck: +String beakColor
    Duck: +swim()
    Duck: +quack()
    Fish: -int sizeInFeet
    Fish: +canEat()
    Fish: +swim()
```

ASCII Preview:

Failed to render diagram

Entity Relationship Diagram

ER diagrams model database structures showing entities (tables) and the relationships between them. Note: relationship labels should use English to ensure full display in ASCII rendering.

Code:

```mermaid
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
    PRODUCT ||--o{ LINE_ITEM : "is in"
```

ASCII Preview:

Failed to render diagram

XY Bar Chart

XY charts display quantitative data across categories. Bar charts are ideal for comparing values across different categories or time periods.

Code:

```mermaid
xychart-beta
    title "Monthly Sales"
    x-axis [Jan, Feb, Mar, Apr, May, Jun]
    y-axis "Revenue" 0 --> 10000
    bar [5000, 6200, 7500, 8200, 7800, 9500]
```

ASCII Preview:

Failed to render diagram

XY Line Chart

Line charts visualize trends and changes over time or across ordered categories, making it easy to spot patterns and progressions.

Code:

```mermaid
xychart-beta
    title "Monthly Growth"
    x-axis [Jan, Feb, Mar, Apr, May, Jun]
    y-axis "Score" 0 --> 100
    line [20, 35, 45, 60, 75, 90]
```

ASCII Preview:

Failed to render diagram

Want to Try It Out?

Try creating your own ASCII Mermaid diagrams using our interactive tool.

Go to ASCII Mermaid Tool →

More Official Demos

The examples above cover the most common use cases. For real-world samples spanning all diagram types — including advanced flowcharts, composite states, OAuth flows, ER schemas, XY overlays, and sprint burndowns — visit the official beautiful-mermaid demo gallery.

View all official demos →

The demo site is maintained by the beautiful-mermaid library authors and shows the full range of supported syntax.