Visualizing Cloud Designations with Mermaid

July 31, 2024

This content originally appeared on DEV Community and was authored by Arindam Mitra

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.

AUTOMATION OBJECTIVES:-

#	TOPICS
1.	Create FlowChart.
2.	Create FlowChart using Subgraph.

REQUIREMENTS:-
1. Mermaid Live Editor

CODE REPOSITORY:-

arindam0310018 / 31-July-2024-DevOps__Diagram-As-Code

DIAGRAM AS CODE

Diagram As Code:-

Greetings to my fellow Technology Advocates and Specialists.

This is “Diagram As Code” Series !

DATE	TOPICS	CONTENT
01.08.2024	Visualizing Cloud Designations with Mermaid	https://dev.to/arindam0310018/visualizing-cloud-designations-with-mermaid-3bl
–	Generate Solution Architecture Diagram using Commandline	–
–	Generate Solution Architecture Diagram using Azure Devops	–

View on GitHub

REFERENCE LINKS:-
1. Overall Mermaid Documentation
2. Mermaid FlowChart Basic Syntax

WHAT IS MERMAID ?
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.
“end” – End of the Grid.

OUTPUT FOR USECASE #2:-

Hope You Enjoyed the Session!!!

Stay Safe | Keep Learning | Spread Knowledge

This content originally appeared on DEV Community and was authored by Arindam Mitra