> ## Documentation Index
> Fetch the complete documentation index at: https://resources.athenaintel.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Mermaid Diagrams

> Ask Athena to create and refine Mermaid flowcharts, sequence diagrams, and data models in Olympus documents and chat conversations.

Athena supports Mermaid diagram syntax for creating flowcharts, sequence diagrams, and other visual representations directly in your documents and chat conversations.

## Overview

Mermaid is a markdown-inspired syntax for creating diagrams and visualizations. Athena can generate and render Mermaid diagrams to help you visualize processes, workflows, system architectures, and data relationships.

## Supported Diagram Types

<CardGroup cols={2}>
  <Card title="Flowcharts" icon="diagram-project">
    Visualize processes and decision flows
  </Card>

  <Card title="Sequence Diagrams" icon="arrows-left-right">
    Show interactions between systems or actors
  </Card>

  <Card title="State Diagrams" icon="diagram-subtask">
    Represent state machines and transitions
  </Card>

  <Card title="Entity Relationship" icon="database">
    Model database schemas and relationships
  </Card>

  <Card title="Gantt Charts" icon="chart-gantt">
    Plan project timelines and dependencies
  </Card>

  <Card title="Class Diagrams" icon="sitemap">
    Document object-oriented structures
  </Card>
</CardGroup>

## How to Use

### Request a Diagram

Simply ask Athena to create a diagram describing what you want to visualize:

<CodeBlock>
  Create a flowchart showing the user authentication process
</CodeBlock>

### Edit and Refine

You can request modifications to existing diagrams:

<CodeBlock>
  Add a step for password reset to the authentication flowchart
</CodeBlock>

## Example Diagrams

### Flowchart Example

```mermaid theme={null}
graph TD
    A[Start] --> B{Is user logged in?}
    B -->|Yes| C[Show Dashboard]
    B -->|No| D[Show Login Page]
    D --> E[Authenticate]
    E --> C
```

### Sequence Diagram Example

```mermaid theme={null}
sequenceDiagram
    participant User
    participant App
    participant API
    participant DB
    
    User->>App: Submit Form
    App->>API: POST /data
    API->>DB: Save Record
    DB-->>API: Success
    API-->>App: 200 OK
    App-->>User: Show Confirmation
```

## Use Cases

<CardGroup cols={1}>
  <Card title="Process Documentation" icon="book">
    Document business processes and workflows visually
  </Card>

  <Card title="System Architecture" icon="server">
    Design and communicate system architecture and component interactions
  </Card>

  <Card title="Project Planning" icon="list-check">
    Create Gantt charts for project timelines and milestones
  </Card>

  <Card title="Data Modeling" icon="diagram-nested">
    Visualize database schemas and entity relationships
  </Card>
</CardGroup>

<Tip>Mermaid diagrams are rendered in real-time and can be copied as code or exported as images for use in presentations.</Tip>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.