Mermaid Flowchart Example

[sazanamix (Takeshi Otsuka)]

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 

Limitation

Notes with the same name will not be reflected correctly.

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

[PaulWalters]

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.)

[mwra (Mark Anderson)]

Thanks for sharing that demo.

[sazanamix (Takeshi Otsuka)]

Thank you @PaulWalters and @mwra for your comment.

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

• You can have notes with the same name.
• You can use a bidirectional arrow with $M_IsBidirectional^[1]. (Mermaid multi-directional)
• You can override a shape with $M_ShapeOverride for other Mermaid’s shapes.
• You can change a arrow type with attributes and minimum length of a link with $M_AttrowType and $M_ArrowLength^[1:1].

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. ↩︎ ↩︎

[sazanamix (Takeshi Otsuka)]

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.

Limitation

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

Enjoy!