Make a small process visible.
Describe a flowchart, repair a disconnected step and keep a text equivalent.
Read the descriptive transcript
Follow the complete narration and the changes shown in the video. Each example can be copied.
1. Start with the intended path
We want a simple process: draft, review, then share. The source uses Mermaid, a diagram language. This is a teaching canvas, not an automated workflow.
Source shown
```mermaid
flowchart LR
A[Draft] --> B[Review]
C[Share]
```
Draft, review, then share.On screen
The cursor points to the source or its result while the explanation is narrated.
2. Read identifiers and labels
The letters are node identifiers. The words in brackets are the labels people see. Left to right describes the layout. Notice that Share has no arrow connecting it yet.
Source shown
```mermaid
flowchart LR
A[Draft] --> B[Review]
C[Share]
```
Draft, review, then share.On screen
The cursor points to the source or its result while the explanation is narrated.
3. Connect Review to Share
Before the letter C, type B, a space, two hyphens and a greater-than sign, then a space. The diagram now connects Review to Share.
Source shown
```mermaid
flowchart LR
A[Draft] --> B[Review]
B --> C[Share]
```
Draft, review, then share.On screen
The source changes one character at a time and the parsed preview updates.
4. Follow both connections
Follow the first arrow from Draft to Review, and the second from Review to Share. Highlighting helps us read this example. It does not mean these actions have run.
Source shown
```mermaid
flowchart LR
A[Draft] --> B[Review]
B --> C[Share]
```
Draft, review, then share.On screen
The Mermaid-rendered diagram connects Draft to Review to Share; a highlight follows the path. The text equivalent is Draft, review, then share.
5. Keep a text equivalent
The sentence below the fence says the same thing without a picture: draft, review, then share. Keep that explanation for readers who cannot see the diagram.
Source shown
```mermaid
flowchart LR
A[Draft] --> B[Review]
B --> C[Share]
```
Draft, review, then share.On screen
The cursor points to the source or its result while the explanation is narrated.
6. Your turn: reconnect the final step
Repair the missing connection in the practice source. The small checker checks this example only. Use a Mermaid-capable preview when you need to render a diagram.
Source shown
```mermaid
flowchart LR
A[Draft] --> B[Review]
B --> C[Share]
```
Draft, review, then share.On screen
The cursor points to the source or its result while the explanation is narrated.
Describe a relationship
A flowchart helps when the connections between steps matter. Here we want to show Draft → Review → Share. Learn code fences first: Mermaid source belongs inside a fence labelled mermaid.
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.
```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. Other destinations need Mermaid support of their own; GitHub documents its Mermaid diagram support.
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.
YOUR TURN
Make the idea your own.
Add B --> C so Draft, Review and Share form one path. Keep the plain-language description outside the mermaid fence.
Readable result
flowchart LR
A[Draft] --> B[Review]
C[Share]
Draft, review, then share.
Compare with one possible answer
```mermaid
flowchart LR
A[Draft] --> B[Review]
B --> C[Share]
```
Draft, review, then share.This is one approach. Your writing can differ while meeting the same structural goal.
TAKE IT WITH YOU
Explain the relationship in both diagram source and ordinary words.
Read the editor guide →Progress is stored in this browser. Your practice text is not saved.