Mermaid Flowchart Example

Dear Tinderbox users.

I make a simple demo tbx file that can generate Mermaid Flowchart code.

mermaid-flowchart.tbx (485.4 KB)
mermaid-flowchart.tbx (414.8 KB) [Admin edit at OP’s request to fix minor text typos in TBX]

How to use

  1. You make a container and set pMermaidContainer.
  2. You make notes ( pMermaid ) and links. if you want to make a subgraph, make a adorment ( pMermaidAdorments )
  3. You choose a direction for drawing like TD or LR.($M_Direction)
  4. run stamp ( make Mermaid ).
  5. pMermaidContainer has the code for mermaid flowchart.

Subgraph support (by Adornments)

This is controled by $OnAdd and $OnRemove of Adornments.
if you delete or move adornment without runnning $OnRemove for all notes, you need to fix a value of $M_Subgraph and $M_adornments.

Supported shapes

* rectangle (<- normal and other shapes)
* rounded
* oval
* ozenge
* diamond
* hex

Supported line types (Priority)

* normal 	 -->			(4th)
* bold     	 ==>			(3rd)
* dotted  	 -.->		    (2nd)
* invisible	 ~~~		   	(1st)

Supported arrow types

* arrow only 


Notes with the same name will not be reflected correctly.

It is not perfect, so please fix the generated code as you needed.


Very nice. I like Mermaid, and I like using it with Tinderbox.

(Sort of a special joy for people who love their keyboards, of course.)

1 Like

Thanks for sharing that demo. :slight_smile:

1 Like

Thank you @PaulWalters and @mwra for your comment.

I enjoyed writing the code of Tinderbox and made a few more improvements.

mermaid-flowchart-ver1.1.tbx (314.7 KB)
(I fixed typos in Read me and upload again.)

  1. Attributes of the link are referenced to start node. ↩︎ ↩︎


Hi Tinderbox users.

I updated the mermaid flowchart sample to be more useful.

Mermaid Flowchart Ver2.0.tbx (699.7 KB)

New Features:

  • Stamp automatically names nodes and subgraphs with the alphabet or their abbreviations.
  • Theme ( default, neutral, dark, forest ) is supported.
  • Custom Theme is supported.
    It is set with the container note’s attributes.
  • Custom Node’s Style ( with the note’s attributes )
  • Web Link ( Node only)
  • Links from Subgraph ( with a normal arrow only )
  • Subgraphs has their direction.

    If any of a subgraph’s nodes are linked to the outside, subgraph direction will be ignored. Instead the subgraph will inherit the direction of the parent graph:

  • Export Quarto chank header ( Optional )
  • Copy the generated code to the clipboard.


Subgraph nesting is not supported.
You can’t preview a flowchart with a theme. => try Mermaid Live Editor

Tinderbox Map

Output from Mermaid Live Editor
Output from Mermaid Live Editor