---
title: "Make a small process visible."
description: "Describe a flowchart, repair a disconnected step and keep a text equivalent."
canonical: https://editmd.app/learn/lessons/mermaid/
markdown: https://editmd.app/learn/lessons/mermaid.md
status: pre-release, waiting list open
generated: editmd-website
---

# Make a small process visible.

Lesson 15 of 18 in Markdown School. Describe a flowchart, repair a disconnected step and keep a text equivalent.

## Describe a relationship

A flowchart helps when the connections between steps matter. Here we want to show Draft → Review → Share. Learn [code fences](/learn/lessons/code-fences/) first: Mermaid source belongs inside a fence labelled `mermaid`.

```markdown
Draft, review, then share.
```

Keep that ordinary sentence alongside the diagram so the process is understandable without seeing it.

## Build one path

In Mermaid, `flowchart LR` lays a flowchart out from left to right. `A`, `B` and `C` are identifiers; the bracketed words are visible labels. An arrow joins two nodes. These forms come from the [official Mermaid flowchart documentation](https://mermaid.js.org/syntax/flowchart.html).

````markdown
```mermaid
flowchart LR
  A[Draft] --> B[Review]
  B --> C[Share]
```

Draft, review, then share.
````

The demonstration uses Mermaid to render the diagram. Its highlight follows the narrated path; the animation is a teaching aid, not evidence that a workflow ran. Mermaid defines a diagram. It does not carry out the actions named in its nodes.

## Repair a disconnected step

A standalone `C[Share]` declares a node but leaves it disconnected. Add `B -->` before it to connect Review to Share. In the video, follow each arrow and compare the resulting path with the sentence beneath it.

The practice box deliberately displays the source as code. Its checker covers this small supplied example, not the full Mermaid language, and does not render arbitrary diagrams. To see a diagram in editmd, use the supported preview described in [rich output](/docs/exports/). Other destinations need Mermaid support of their own; GitHub documents its [Mermaid diagram support](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams).

## Preserve the meaning

Do not rely on colour or motion to explain a connection. Name the steps, keep the text equivalent and check whether the arrows say what you intended. When AI proposes a diagram, compare it with the real procedure. A plausible-looking arrow can still describe the wrong dependency.

## Exercise

Add B --> C so Draft, Review and Share form one path. Keep the plain-language description outside the mermaid fence.

## Takeaway

Explain the relationship in both diagram source and ordinary words.

Related guide: https://editmd.app/docs/exports/. All lessons: https://editmd.app/learn.md