DEV Community

Cover image for Visualizing Cloud Designations with Mermaid
Arindam Mitra
Arindam Mitra

Posted on • Updated on

Visualizing Cloud Designations with Mermaid

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:-



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


Enter fullscreen mode Exit fullscreen mode
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:-
Image description
Image description
Image description
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


Enter fullscreen mode Exit fullscreen mode
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


Enter fullscreen mode Exit fullscreen mode

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:-
Image description
Image description
Image description

Hope You Enjoyed the Session!!!

Stay Safe | Keep Learning | Spread Knowledge

Top comments (0)