About: 2 x Microsoft MVP - IaC & Devops | 2 x Sessionize Active Speaker | Blogger ✍️ | Public Speaker 🔊 | Long Distance Runner🏃♂️ | Hiking 🥾 | Traveler 🧳 | Citizen of the 🌎
Location:
Ennetbaden, Switzerland
Joined:
Mar 10, 2022
Visualizing Cloud Designations with Mermaid
Publish Date: Jul 31 '24
4 0
Greetings to my fellow Technology Advocates and Specialists.
In this Session, I will demonstrate How to Create FlowChart Using Mermaid: A Step-by-Step Guide with Cloud Designations as Example.
I had the Privilege to talk on this topic in ONE Azure Community:-
NAME OF THE AZURE COMMUNITY
TYPE OF SPEAKER SESSION
Festive Tech Calendar - 2024
Virtual
EVENT ANNOUNCEMENTS:-
VIRTUAL SESSION:-
LIVE DEMO was Recorded as part of my Presentation in FESTIVE TECH CALENDAR - 2024 Forum/Platform
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.
