1. Mermaid lets you create diagrams and visualizations using text and code.
2. It is based on JavaScript and inspired from Markdown Text.
NOTE:-
If users have familiarity or a working experience with Markdown, then understanding Mermaid Syntax comes easy.
MERMAID FLOWCHART: POINTS TO NOTE:-
1. Flowcharts are composed of nodes (geometric shapes) and edges (arrows or lines).
Possible FlowChart orientations are: a.) TB - Top to bottom; b.) TD - Top-down/ same as top to bottom; c.) BT - Bottom to top; d.) RL - Right to left; LR - Left to right.
USECASE #1:-
Create FlowChart.
Below follows the code:-
flowchart BT
B(Chief Cloud Officer) --> A(Chief Technology Officer)
C(Cloud Architect) --> B
D(Cloud Service Manager) --> B
E(Cloud Application Lead) --> B
C1(Devops Engineer) --> C
C2(IaC Developer) --> C1
C3(IaC Operations Engineer) --> C2
F(Support Engineer) --> C3
D1(Cloud Operations Manager) --> D
D2(Cloud Operations Engineer) --> D1
F(Support Engineer) --> D2
E1(Cloud Developer) --> E
EXPLANATION OF USECASE #1 MERMAID FLOWCHART CODE:-
1. flowchart BT - This Syntax indicates that the orientation of the FlowChart will be Bottom to Top.
2. B(Chief Cloud Officer) - This Syntax indicates a node with round edges.
3. --> - This Syntax indicates a link with arrow head.
OUTPUT FOR USECASE #1:-
USECASE #2:-
Create FlowChart using Subgraph.
Below follows the code:-
flowchart BT
B(Chief Cloud Officer) --> A(Chief Technology Officer)
C(Cloud Architect) --> B
subgraph PLATFORM
C1(Devops Engineer) --> C
C2(IaC Developer) --> C1
C3(IaC Operations Engineer) --> C2
end
D(Cloud Service Manager) --> B
subgraph OPERATIONS
D1(Cloud Operations Manager) --> D
D2(Cloud Operations Engineer) --> D1
end
E(Cloud Application Lead) --> B
subgraph APPLICATION
E1(Cloud Developer) --> E
end
subgraph SUPPORT
F(Support Engineer) --> C3
F(Support Engineer) --> D2
end
EXPLANATION OF USECASE #2 MERMAID FLOWCHART CODE:-
1. flowchart BT - This Syntax indicates that the orientation of the FlowChart will be Bottom to Top.
2. B(Chief Cloud Officer) - This Syntax indicates a node with round edges.
3. --> - This Syntax indicates a link with arrow head.
4. subgraph PLATFORM or subgraph OPERATIONS or subgraph SUPPORT - This Syntax indicates grouping of nodes in a grid and providing a title to it.
SYNTAX OF "SUBGRAPH":-
subgraph one
a1-->a2
end
where,
"subgraph one" - Title of the Grid.
"a1-->a2" - a1 and a2 are nodes linked with arrow head.
Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.
Heroku was created by developers, for developers. Get started today and find out why Heroku has been the platform of choice for brands like DEV for over a decade.
Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.
A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!
On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.
Top comments (0)