The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →For Mermaid flowcharts, keep node IDs separate from the text readers see, avoid the lowercase word end, and watch for labels or IDs that begin with o or x immediately after a connector. Quote labels that contain punctuation, and use Mermaid’s documented entity codes or string formats when needed. These are flowchart-specific checks, not universal rules for every Mermaid diagram type.
Start with the distinction between a node ID and its label
A node ID identifies a flowchart node so you can connect to it or refer to it again. A label is the visible text inside the node. For example, in A[Start] --> B[Review], the IDs are A and B; the labels shown in the diagram are “Start” and “Review.” Once a node has an ID, you can use that ID in later edges without repeating its label. See Mermaid’s flowchart syntax reference.
![Mermaid Construction: A Compound-Predicate Construction with Biclausal Appearance (Comparative Handbooks of Linguistics [CHL], 6)](https://m.media-amazon.com/images/I/41tLvXIwAkL._SL160_.jpg)
As an Amazon Associate I earn from qualifying purchases.
Use short, descriptive IDs that are stable as the diagram changes, and put reader-facing wording in the label. This makes it easier to change the displayed text without changing the references in your edges.
PC 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 & 11Crashes, 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 minuteCheck these flowchart syntax hazards
Do not use lowercase end as ordinary node text
Mermaid’s Flowchart Syntax documentation warns: “If you are using the word “end” in a Flowchart node, capitalize the entire word or any of the letters (e.g., “End” or “END”), or apply this workaround. Typing “end” in all lowercase letters will break the Flowchart.” For a visible terminal label, write End, END, or use another word such as Finish. This warning is documented for flowcharts; it should not be generalized to every Mermaid diagram grammar.
#1 Best Overall
Prevent a leading lowercase o or x from looking like an edge marker
Immediately after a connector, lowercase o and x can be interpreted as circle and cross edge markers. For instance, A---oB may be parsed as a circle edge rather than an edge to a node whose ID starts with o; A---xB has the corresponding cross-edge ambiguity.
- Add a space after the connector, as in
dev--- ops. - Capitalize the first character of the node ID, as in
dev---Ops. - If a connection label begins with lowercase
oorx, use a space or capitalize its first letter to avoid the same ambiguity.
These examples and cautions are in Mermaid’s flowchart reference; the Mermaid Chart syntax guide also explains the connection-label case.
Quote visible text when punctuation might overlap with shape syntax
Brackets, parentheses, braces, and other punctuation help define node shapes and grammar. When they are intended as literal label text, put the label in quotes. Mermaid’s example is id1["This is the (text) in the box"]. Quoting is a practical first choice for text containing parentheses, commas, or semicolons, as shown in the official flowchart examples.
Use entity codes for characters that remain troublesome
When quoting is not enough, Mermaid documents entity codes within labels. For example, #quot; represents a double quote and #9829; represents the character with decimal code 9829. Numeric values are decimal: #35; represents #. Mermaid also supports HTML character names. Use these documented forms rather than assuming a general backslash-escape rule.
Choose a string form for formatting and line breaks
Traditional labels work well for plain text. They can include <br> when you need an explicit line break. For formatted text, automatic wrapping, or physical line breaks, Mermaid flowcharts also support Markdown strings. Put the Markdown text inside backticks, with the whole label in double quotes:
A["`A **bold** label`"]
Markdown strings support bold and italics as well as wrapping and line breaks. Mermaid documents their use for node, edge, and subgraph labels. Check the current flowchart syntax reference if you are using these features in a host that may bundle a different Mermaid version.
A compact flowchart that applies the checks
This example uses descriptive IDs, quotes punctuation in a label, avoids lowercase end, and uses Yes and No connection labels:
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →flowchart LR
startNode["Begin (draft)"] --> reviewNode{"Ready?"}
reviewNode -->| Yes| finishNode[End]
reviewNode -->| No| startNodeIn a Mermaid editor, place the diagram in a Mermaid code block or the host’s Mermaid editor and render it. If it fails, check for an accidental lowercase end, an o or x directly after a connector, or punctuation that should be quoted in a visible label.
Keep syntax rules scoped to the diagram type and host version
There is no basis here for an exhaustive list of Mermaid-wide reserved words. The flowchart reference identifies the lowercase end problem and the o/x connector ambiguity; other Mermaid diagram types can have different grammars and delimiters. For example, Mermaid’s use-case diagram syntax reference documents its own reserved delimiters and sequences.
Mermaid syntax evolves. The flowchart reference marks collapsible subgraphs as available in Mermaid v11.17.0 and later. That version note applies to that feature, not to the basic checklist above. If a newer construct does not work, check the Mermaid version embedded in the editor, documentation site, or publishing host where the diagram will render.
Optional reference
For a broader reference while authoring, Mermaid describes The Official Guide to Mermaid.js by Knut Sveidqvist and Ashish Jain. Google Books records Packt Publishing as the publisher and 2021 as the publication year. The free online syntax references are sufficient for this checklist; the book is optional.
Quick Recap
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.
