DEV Community

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

Posted on • Edited on

4

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.

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:-
Image description
VIRTUAL SESSION:-
LIVE DEMO was Recorded as part of my Presentation in FESTIVE TECH CALENDAR - 2024 Forum/Platform
Duration of My Demo = 49 Mins 02 Secs
AUTOMATION OBJECTIVES:-
# TOPICS
1. Create FlowChart.
2. Create FlowChart using Subgraph.
REQUIREMENTS:-
1. Mermaid Live Editor
CODE REPOSITORY:-

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
15.08.2024 Code Generated Architecture Diagram https://dev.to/arindam0310018/code-generated-architecture-diagram-13o3
19.11.2024 Code Generated Architecture Diagram using Devops https://dev.to/arindam0310018/code-generated-architecture-diagram-using-azure-devops-2ah4

I had the Privilege to talk on this topic in ONE Azure Communities:-

NAME OF THE AZURE COMMUNITY TYPE OF SPEAKER SESSION
Festive Tech Calendar - 2024 Virtual
EVENT ANNOUNCEMENTS:-
Image description



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

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Heroku

This site is powered by Heroku

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.

Sign Up

👋 Kindness is contagious

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.

Okay