• By
  • 9 min read

Mermaid Diagrams for Humans and LLMs: A Practical Balance

A process owner reviewing one clear flowchart that also connects to an abstract machine-readable structure
One diagram can serve people and AI when its meaning is clear before its source is optimized.

Your operations manager wants to understand a process in 30 seconds. Your AI assistant needs enough structure to answer a precise question about it. Those goals are compatible, but only if the diagram is written for meaning rather than decoration.

The best balance is a small diagram with plain-language labels for people, stable IDs and labelled relationships for machines, and nearby prose that states scope, status and important exceptions. Do not turn every business detail into a box. Do not shorten labels into codes that only an LLM prompt can explain. Let the picture show the route, and let the page carry the operating detail.

This guide uses a fictional service-request process. It is a teaching example, not a claim about a particular company or AI model. The Mermaid source was checked locally with Mermaid 11.16.0.

Begin with the decision, not the diagram

Before writing Mermaid, finish this sentence:

After reading this diagram, a person should be able to decide or explain...

For the example in this article, the answer is:

...whether a service request can be scheduled, and who acts when information is missing or approval is refused.

That sentence creates a useful boundary. Pricing rules, notification channels, staff names and service-level targets may matter to the full procedure, but they do not all need to sit inside this view.

An LLM benefits from the same boundary. A smaller, explicit view reduces the chance that an unrelated branch will be treated as evidence for the question being asked. More context is not automatically better context.

Use one source with two readable layers

Every important element should have a human-facing part and a structural part:

ElementFor the human readerFor an LLM or reviewer
NodeA short, natural label such as “Coordinator checks required information”A stable ID such as check_information
ArrowA visible action or conditionAn explicit source, target and direction
DecisionA question a manager can answerSeparate labelled outcomes such as Yes: complete and No: missing information
BoundaryA clear title and stated scopeA compact set of in-scope entities
Status“Current process”, “proposal” or “example” in nearby proseThe same status repeated in the prompt or context wrapper
DetailExplanations, owners and policy links beside the diagramEvidence references tied to node IDs where useful

The stable ID is not a second label to display. It is the quiet anchor in the source. People read “Manager reviews request”; reviewers and tools can refer to manager_review without saying “the blue box on the right.”

A balanced Mermaid example

The following process contains seven steps, two decisions and two return paths. It is large enough to be useful but small enough to discuss in a meeting.

flowchart TD
  accTitle: Fictional service request review
  accDescr {
    A coordinator checks a service request. Missing information returns to the requester.
    A complete request goes to manager review. An approved request is scheduled, while a refused request returns for revision.
  }

  request_received["Service request received"]
  check_information{"Required information present?"}
  add_information["Requester adds missing information"]
  manager_review["Manager reviews request"]
  approval_decision{"Approved?"}
  revise_request["Requester revises request"]
  schedule_work["Coordinator schedules work"]

  request_received --> check_information
  check_information -->|"No: missing information"| add_information
  add_information -->|"Resubmit"| check_information
  check_information -->|"Yes: complete"| manager_review
  manager_review --> approval_decision
  approval_decision -->|"No: changes requested"| revise_request
  revise_request -->|"Resubmit"| manager_review
  approval_decision -->|"Yes: approved"| schedule_work

Download the editable Mermaid source and the human-and-LLM review checklist.

The Mermaid flowchart reference documents nodes, edges, labels and subgraphs. The accessibility reference explains accTitle and accDescr. These fields are useful, but the visible page should still explain the process because not every publishing or export path exposes embedded SVG descriptions in the same way.

What makes the example work for people

The labels use familiar business language. Each box contains one action or outcome. Both diamonds ask a genuine question, and each exit says what the answer means. A reader does not need to learn the internal IDs or inspect the source.

The diagram also avoids carrying the whole procedure. The page can explain who qualifies as a manager, how quickly a request should be reviewed, and which system stores the approval. Those details are easier to search, update and quote as prose.

Use this rough division:

Put in the diagramKeep in nearby prose or a table
Main path and meaningful returnsFull policy wording
Decision questions and outcomesSLA calculations and escalation contacts
Roles needed to understand ownershipTeam rosters and named substitutes
Important handoffsField definitions and form instructions
Start and useful end stateChange history and approval evidence

If removing a detail would change how the reader follows the route, it probably belongs in the diagram. If it explains how to perform one step, it probably belongs beside the diagram.

What makes the same source useful to an LLM

The source exposes more than the rendered picture:

  • check_information and approval_decision are unambiguous references.
  • Every return path has a direction and an action label.
  • The visible labels preserve business meaning instead of using cryptic abbreviations.
  • The accessible description gives a short natural-language account of the main paths.
  • The scope is small enough to include with a focused question.

That structure can help an LLM compare a written procedure with the diagram, find a missing branch or explain which documented path applies to a scenario. It does not prove the process is correct or show that a particular request followed that path.

Mermaid syntax is structured text, but it is not a database or live process record. Mermaid's parse API can establish whether source is syntactically valid. A successful parse or render cannot establish that managers actually follow the process.

Wrap the diagram in a small context contract

Do not paste an unexplained diagram into an AI chat and ask, “What is wrong?” Give it status, scope and a bounded task.

STATUS
Reviewed current-state process as of 25 September 2026.

SCOPE
From receipt of a service request to scheduling. Notification delivery,
staffing and pricing are outside this view.

TASK
Compare the supplied policy statements with the Mermaid source. Report only:
1. a policy statement with no matching path;
2. a diagram path with no supporting policy statement;
3. an ambiguous decision or outcome.

RULES
- Cite the relevant node ID or edge for every finding.
- Separate observations from suggested changes.
- Do not invent missing policy.

POLICY STATEMENTS
[Paste the reviewed statements with IDs.]

MERMAID SOURCE
[Paste the smallest relevant diagram.]

OpenAI's prompt-engineering guidance recommends clear instructions and relevant context. The practical point here is vendor-neutral: identify what the material is, say what question it may answer, and constrain the response so a person can check it.

Avoid optimizing too far in either direction

Too human-oriented

A polished picture can still be poor working context when it relies on color, position or implied meaning:

  • arrows have no conditions;
  • three boxes all say “Review”;
  • a green route means approval but is never labelled;
  • exceptions are described verbally in the meeting but absent from the source;
  • current and proposed steps appear in one view without status labels.

Humans may infer the intended meaning during a presentation. An LLM or a colleague reading the page later has only the recorded material.

Too LLM-oriented

A source file can be structurally precise and still be unpleasant for people:

  • labels are reduced to internal codes;
  • every field, rule and exception becomes a node;
  • edge labels read like database predicates;
  • one diagram tries to represent the entire organization;
  • generated notes repeat obvious relationships until the page becomes noise.

An LLM can process a long source file, but that does not make the result an effective business document. If the diagram cannot support a useful conversation on its own, the source is not balanced.

Use a three-pass review

Review the material in this order rather than trying to perfect everything at once.

Pass 1: a person traces the process

Ask someone who did not author the diagram to explain the normal route, each decision and each return. Record where they rely on your verbal explanation. Those gaps need a label, a short prose note or a smaller scope.

Pass 2: inspect the source as structured evidence

Check that IDs are unique and stable, arrows point in the intended direction, branch labels describe outcomes, and no important relationship exists only through visual placement. Compare the source with the accepted policy or system record.

Pass 3: test one bounded AI task

Give the diagram and the same supporting evidence to an approved LLM. Request a narrow comparison, not a broad redesign. Verify every finding against the source material and record false additions as well as useful observations.

The downloadable checklist keeps those three passes separate. A diagram is not “AI-ready” because an assistant produced a confident summary, and it is not “human-friendly” because its colors look pleasant.

Know when one diagram should become several

Split the view when readers must zoom out so far that labels become small, when unrelated questions compete for space, or when the prompt needs most of the source removed before it is safe and relevant.

A practical documentation set might contain:

  1. a business overview showing the main path and ownership;
  2. one exception diagram for returns, timeouts and escalation;
  3. a system view for integrations or data movement;
  4. prose tables connecting stable IDs to policies and evidence.

The overview serves the meeting. The focused views serve investigation and review. Stable names connect them without forcing every concern into one canvas.

For techniques that help people navigate large diagrams, see Read large Mermaid diagrams without losing your place. To test Mermaid as model context with the same prompt before and after adding a diagram, use the worked LLM-context example.

Decide whether Mermaid is still the right level

Mermaid is strong when the goal is a readable, editable explanation. If the process now needs formal event semantics, participant message flows or execution by a workflow engine, adding more conventions to a flowchart can create false confidence.

That is the point to consider BPMN. Continue with When to switch from Mermaid to BPMN for a decision test and migration method. The goal is not to make Mermaid imitate every BPMN symbol. It is to preserve the verified process meaning while moving to a notation suited to the next job.

If your team publishes Mermaid in Confluence, Diagram Lens provides source editing, preview and reader controls. Those tools help people inspect the diagram; process owners still need to verify its meaning and decide what context may be shared with an LLM.

Diagram preview

Powered by Diagram Lens

Loading diagram viewer…