Mermaid Diagrams

Mermaid Flow Charts

Flowcharts are made up of nodes (shapes) and edges (lines). The syntax is documented here. You can play around with Mermaid diagrams in a live online editor at https://mermaid.live/. The easiest way to learn might be to just dive right in with an existing diagram (like this one for Verify by Video).

Nodes

The basic format of a node is: nodeID[fa:fa-icon Node Text]

Once you’ve declared a node, you can reference it elsewhere in your diagram by its ID. As a best practice, it’s a good idea to declare all your nodes in one section and provide the links in a separate section. For small diagrams, it’s easy to do everything inline, but once the diagram has a dozen or more nodes, it’s much easier to read and maintain in sections.

Node IDs

Node IDs can be whatever you like, as long as each is unique, but for readability, it’s a good idea to give nodes meaningful IDs, as it’s easier to know what is happening if you have crClosed --> msgClosed instead of, say, 0014 --> 0106. As a standard, we put a prefix indicating the type of node, followed by a short but descriptive name in lower camel case:

• state for state, e.g., start or end - stateStart, stateEnd, stateDisconnect
• cr for call report, e.g., crClosed, crNalo
• msg for message (audio prompt), e.g., msgGoodbye, msgHold
• if for decisions, e.g., ifOpen, ifNalo

If you need multiple nodes of the same type, for instance, if you need a set of office closed checks, call reports, and messages in each queue subgraph, you can append a name, number, or other descriptor to the end of the ID, e.g., ifOpenBcros, msgClosedQueue3.

Comments

Comments are started with two percent signs, e.g., %% Nodes. It’s a good idea to identify sections using comments. Note that a comment must be on its own line; e.g., you can’t append a comment to the same line as anything else. For example, inputCBMenu[/"fa:fa-keyboard Menu Input"/] %% this node is for caller input is illegal and will cause an error.

Edges, Arrows, Connectors, Lines

Arrow: firstNode[Step 1] --> secondNode[Step 2] Editor ::: mermaid graph LR firstNode[Step 1] —> secondNode[Step 2] :::

Arrow with Text: firstNode[Step 1] --> |Go!| secondNode[Step 2] or thirdNode[Step 3] -- Go! --> fourthNode[Step 4]Editor ::: mermaid graph LR firstNode[Step 1] —> |Go!| secondNode[Step 2] thirdNode[Step 3] — Go! —> fourthNode[Step 4] :::

Dotted Arrow: firstNode[Step 1] -.-> secondNode[Step 2] Editor ::: mermaid graph LR firstNode[Step 1] -.-> secondNode[Step 2] :::

Dotted Arrow with Text: firstNode[Step 1] -. Go! .-> secondNode[Step 2] Editor ::: mermaid graph LR firstNode[Step 1] -. Go! .-> secondNode[Step 2] :::

To make a line longer, add more hyphens (after the text, if the line has text). You can change the layout of a diagram by making lines longer, although it may take some trial-and-error to get something like what you want.

For call flows, we use ==> for links between flow/queue nodes, and -.-> for links from inputs or outputs outside of the flow (e.g., for data tables).

Subgraphs

You can make a subgraph, e.g., for queues or for a reusable task, etc. by declaring it in a block, like this: Editor

flowchart TD
    start((Start)) --> whichStep{Step One \n or Subgraph?}
    whichStep -- One --> stepOne[Step One]
    stepOne --> subStepA
    whichStep -- Sub --> Sub
    subgraph Sub
        subStepA[Step A] --> subStepB[Step B]
    end
    subStepB --> stepTwo[Step Two]
    Sub --> stepOther[Different Step]
    stepTwo --> theEnd((The End))
    stepOther --> theEnd

::: mermaid flowchart TD start((Start)) —> whichStep{Step One \n or Subgraph?} whichStep — One —> stepOne[Step One] stepOne —> subStepA whichStep — Sub —> Sub subgraph Sub subStepA[Step A] —> subStepB[Step B] end subStepB —> stepTwo[Step Two] Sub —> stepOther[Different Step] stepTwo —> theEnd((The End)) stepOther —> theEnd :::

Note that nodes that are declared within the subgraph reside in the subgraph, and that you can link from nodes within the subgraph to those outside of the subgraph, or you can link directly to or from the subgraph.

Node Icons

The icons are from Font Awesome version 4, but note that we’re restricted to the subset of free icons. Sadly, icons (and other Mermaid features) are not supported in DevOps. :’( There are links to the Live Editor for examples shown here.

Common Node Shapes for Our Diagrams

DID: did1([fa:fa-phone 250-321-4567]) Editor ::: mermaid graph LR did1([fa:fa-phone 250-321-4567]) :::

TFN: tfn1([fa:fa-phone-square 1-800-321-4567]) Editor ::: mermaid graph LR tfn1([fa:fa-phone-square 1-800-321-4567]) :::

Internal Transfer: xfr1([fa:fa-headphones 200-722-1234]) Editor ::: mermaid graph LR xfr1([fa:fa-headphones 200-722-1234]) :::

Call Report: crBcrosNalo[fa:fa-bullseye SBC_HD_BCROS_NALO] Editor ::: mermaid graph LR crBcrosNalo[fa:fa-bullseye SBC_HD_BCROS_NALO] :::

Audio Prompt: msgGreeting[fa:fa-file-audio SBC_MESSAGE_NAME] Editor ::: mermaid graph LR msgGreeting[fa:fa-file-audio SBC_SHD_GREETING] :::

Decision: ifScheduleCheck{fa:fa-question Schedule Check} Editor ::: mermaid graph LR ifScheduleCheck{fa:fa-question Schedule Check} ::: Input: inputCBMenu[/"fa:fa-keyboard Menu Input"/] Editor ::: mermaid graph LR inputCBMenu[/“fa:fa-keyboard Menu Input”/] :::

::: Music: msgMusic[fa:fa-play-circle Music] Editor ::: mermaid graph LR msgMusic[fa:fa-play-circle Music] :::

Queue: agentQueueName([fa:fa-headset Flow.QueueName Agent]) Editor ::: mermaid graph LR agentQueueName([fa:fa-headset SBC_HD_BCROS Agent]) :::

Release Call: stateRelease((fa:fa-close Release Call)) Editor ::: mermaid graph LR stateRelease((“fa:fa-close Release Call”)) :::