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

Print Share Comment Cite Upload Translate Updates

APA

Arindam Mitra | Sciencx (2024-07-31T23:11:04+00:00) Visualizing Cloud Designations with Mermaid. Retrieved from https://www.scien.cx/2024/07/31/visualizing-cloud-designations-with-mermaid/

MLA

" » Visualizing Cloud Designations with Mermaid." Arindam Mitra | Sciencx - Wednesday July 31, 2024, https://www.scien.cx/2024/07/31/visualizing-cloud-designations-with-mermaid/

HARVARD

Arindam Mitra | Sciencx Wednesday July 31, 2024 » Visualizing Cloud Designations with Mermaid., viewed ,<https://www.scien.cx/2024/07/31/visualizing-cloud-designations-with-mermaid/>

VANCOUVER

Arindam Mitra | Sciencx - » Visualizing Cloud Designations with Mermaid. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/07/31/visualizing-cloud-designations-with-mermaid/

CHICAGO

" » Visualizing Cloud Designations with Mermaid." Arindam Mitra | Sciencx - Accessed . https://www.scien.cx/2024/07/31/visualizing-cloud-designations-with-mermaid/

IEEE

" » Visualizing Cloud Designations with Mermaid." Arindam Mitra | Sciencx [Online]. Available: https://www.scien.cx/2024/07/31/visualizing-cloud-designations-with-mermaid/. [Accessed: ]

rf:citation

» Visualizing Cloud Designations with Mermaid | Arindam Mitra | Sciencx | https://www.scien.cx/2024/07/31/visualizing-cloud-designations-with-mermaid/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

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

DIAGRAM AS CODE

Diagram As Code:-

Related Posts