For a Mermaid flowchart, the documented reserved-word trap is the exact lowercase word end: change it to End or END. For other troublesome label characters, use a quoted label or entity codes. In a state diagram, keep the identifier simple and put the reader-facing wording in a separate description.
Fix lowercase end in a flowchart
Mermaid’s official flowchart documentation warns that lowercase end in a flowchart node breaks the diagram. Its documented fix is to capitalize the entire word or any of its letters—for example, End or END.
As an Amazon Associate I earn from qualifying purchases.
This applies to the exact lowercase spelling. If the visible label needs to read “end,” changing its capitalization is the documented option in the cited guidance. The documentation also mentions a workaround, but the available excerpt does not show its syntax, so it is safer not to guess at it.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Handle punctuation and quotes in flowchart labels
A node identifier and its displayed label are different parts of flowchart syntax. For example, id1[This is the text in the box] uses id1 as the identifier and the bracketed text as the visible label.
#1 Best Overall
When label text contains characters that can interfere with parsing, quote the displayed text:
id1["This is the (text) in the box"]Mermaid also documents entity codes for special characters. Its example uses #quot; to represent a double quote:
A["A double quote:#quot;"]The flowchart documentation says decimal character values and HTML character names are supported as well. Quoting and entity codes address awkward label characters; they should not be confused with the special lowercase end rule.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Separate a state’s identifier from its displayed name
State diagrams let you use a stable, simple identifier for transitions while showing different wording to readers. The official state diagram documentation shows two forms:
Rank #3
state "This is a state description" as s2
s2 : This is a state descriptionIn the first form, s2 is the identifier and the quoted string is the description. In the second, the colon attaches a description to the state identifier. Transitions use identifiers, such as s2 --> s3, so the visible wording can be descriptive without becoming the token used to connect states.
Choose the fix that matches the problem
| Problem | Diagram type | Documented approach |
|---|---|---|
The node label is exactly lowercase end |
Flowchart | Capitalize the whole word or any letter, such as End or END. |
| Label text contains punctuation or quotes that affect parsing | Flowchart | Use a quoted label; use an entity code when needed. |
| The wording should differ from the token used to connect states | State diagram | Use a simple identifier and assign a separate quoted state description or colon description. |
Check a diagram that still fails
- Identify the diagram type. Confirm whether the snippet is a flowchart or a state diagram; their syntax and documented guidance differ.
- Check the renderer and Mermaid version. Test in the same environment where the diagram will appear, since embedded renderers can use different versions.
- Apply the matching fix. For flowchart labels, check lowercase
endfirst, then quote troublesome text or use entity codes. For state diagrams, separate the identifier from the description. - Reduce the snippet if needed. Remove unrelated nodes and transitions until only the smallest failing example remains, then compare it in the target renderer.
The cited flowchart page identifies lowercase end as a specific trap; the cited state diagram page demonstrates separate identifiers and descriptions but does not provide a complete list of reserved words. Do not assume a word that causes trouble in one diagram type behaves the same way in the other.
Quick Recap
Best Value
- The Little Mermaid-themed Coloring and Activity Book
- Book contains 80 fun-filled coloring and activity pages!
- Book measures approx 7.75'' x 10.75''
- Cover varies-- contents do not (see photos)
- Perfect for quiet indoor play
Rank #4
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
