---
title: "Mermaid in the Web App"
description: "Keep diagrams precise without keeping people out of the workflow."
---

> Documentation Index
> Fetch the complete documentation index at: https://docs.merfolk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Mermaid in the Web App

Mermaid is the current source format for Merfolk diagrams. The web editor renders that source into a visual diagram while you work, giving technical contributors precision and giving the wider team something they can review together.

## Start with a diagram type

For example, a flowchart:

```mermaid
flowchart LR
  User --> App --> Database
```

You can use Mermaid's supported diagram syntax, including flowcharts and sequence diagrams. If the preview reports a syntax problem, inspect the source near the highlighted error.

## Keep source readable

- Give nodes descriptive labels.
- Use consistent direction and naming.
- Keep large diagrams organized into logical sections.
- Store important source in version control when the diagram is part of a software project.

The [CLI get command](/cli/diagrams/get) can retrieve a diagram's source for local editing or automation.

Source: https://docs.merfolk.io/web/diagrams/mermaid/index.mdx