flowchart linkstyle

December 13, 2023

intro

To create diagrams dynamically in an internet browser you can use Mermaid, which is a diagramming and charting tools based on JavaScript and inspired by Markdown text definitions (Woodward & Biagianti, 2022). It has default style, which should be sufficient. But if an adjustment is necessary, e.g. style of the link – the line connecting two nodes, can be modified (Drago, 2023) and also the other features.

flowchart

code

flowchart LR
  B --> I --> P --> O --> E
  
  B(["Begin"])
  I[/"Input"/]
  P["Process"]
  O[/"Output"/]
  E(["End"])
  
  linkStyle default stroke:red
  linkStyle 1 stroke:blue
  linkStyle 3 stroke:green

linkstyle

default is for all lines between two nodes.
n is for (n+1)-th line, since it begins with 0, and override default for the line.
1 is for second line, the line beetween Input and Process elements.
3 is for fourth line, the line between Process and End elements.

limitation

The linkSyle can not change color of arrow head.
There is not any recent information available about it (Greywolf, 2020).

refs

Drago R (2023) “Colouring Your Arrow / Link with linkStyle in Mermaid Markdown”, DEV Community, url https://dev.to/ranggakd/coloring-your-arrow-link-with-linkstyle-in-mermaid-markdown-39kk .
Greywolf J (2020) “Custom arrowhead for mermaid class diagram”, Stack Overflow, url https://stackoverflow.com/q/62165026/9475509 .
Woodward M, Biagianti A (2022) “Include diagrams in your Markdown files with Mermaid”, GitHub Blog, url https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/ .