mermaid examples

[josemvidal]

Hi bot! Jjjj Jjjkk

asdafsf dk dkfd kd kd dkd dk dk dkd dk dkd kd kd kd

[josemvidal]

This is a comment.

[josemvidal]

flowchart LR
    A[front-end<br>react] <--> 
    B[2. Store diagram<br>URL somewhere] -->
    C[3. Copy Mermaid code<br>to page markdown file] -->
    D[4. Add caption]

    classDef box fill:#fff,stroke:#000,stroke-width:1px,color:#000;
    class A,B,C,D box

another

graph LR
    A <--> B

flowchart LR
    A o--o B
    B <--> C
    C x--x D

[josemvidal]

flowchart LR
    A[<em>browser<em><br/>react]<-- JSON -->B[<em>server</em><br>django REST]
    B <-->C[API]
    A <-- JSON -->D[firebase]
    classDef box fill:#fff,stroke:#000,stroke-width:1px,color:#000;
    class A,B,C,D box

linkStyle 0 fill:#000,stroke:#f00,stroke-width:1px;

[josemvidal]

flowchart LR
    id1(Start)-->|hello| id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

[josemvidal]

flowchart
    subgraph Storefront
        %%ratings[Show reviews on product page <img src='https://iconscout.com/ms-icon-310x310.png' class="center" height='40px' width='40px'>]
        ratings[Show reviews on product page]
        feedback[Review form at checkout]
    end

    subgraph Shopify Admin
        ac[Embedded Node.js Application] <--> te[Theme App Extension]
        ac[Embedded Node.js Application] <--> pc[Post-Purchase Checkout Extension]
    end

    subgraph Shopify Platform
        meta[Metafield API]
        products[Product API]
        oauth[OAuth API]
        Admin[Admin API]
    end

     classDef green fill:#9f6,stroke:#333,stroke-width:2px;
     classDef orange fill:#f96,stroke:#333,stroke-width:2px;
     class te,ratings green
     class feedback,pc orange

[josemvidal]

graph TB
    sq[Square shape] --> ci((Circle shape))

    subgraph A
        od>Odd shape]-- Two line<br/>edge comment --> ro
        di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
        di==>ro2(Rounded square shape)
    end

    %% Notice that no text in shape are added here instead that is appended further down
    e --> od3>Really long text with linebreak<br>in an Odd shape]

    %% Comments after double percent signs
    e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)

    cyr[Cyrillic]-->cyr2((Circle shape Начало));

     classDef green fill:#9f6,stroke:#333,stroke-width:2px;
     classDef orange fill:#f96,stroke:#333,stroke-width:4px;
     class sq,e green
     class di orange

[josemvidal]

graph LR;
 client([client])-. Ingress-managed <br> load balancer .->ingress[Ingress];
 ingress-->|routing rule|service[Service];
 subgraph cluster
 ingress;
 service-->pod1[Pod];
 service-->pod2[Pod];
 end
 classDef plain fill:#ddd,stroke:#fff,stroke-width:4px,color:#000;
 classDef k8s fill:#326ce5,stroke:#fff,stroke-width:4px,color:#fff;
 classDef cluster fill:#fff,stroke:#bbb,stroke-width:2px,color:#326ce5;
 class ingress,service,pod1,pod2 k8s;
 class client plain;
 class cluster cluster;

[josemvidal]

graph TB
subgraph "zoneB"
   p3(Pod) --> n3(Node3)
   n4(Node4)
end
subgraph "zoneA"
   p1(Pod) --> n1(Node1)
   p2(Pod) --> n2(Node2)
end

classDef plain fill:#ddd,stroke:#fff,stroke-width:4px,color:#000;
classDef k8s fill:#326ce5,stroke:#fff,stroke-width:4px,color:#fff;
classDef cluster fill:#fff,stroke:#bbb,stroke-width:2px,color:#326ce5;
class n1,n2,n3,n4,p1,p2,p3 k8s;
class zoneA,zoneB cluster;

[josemvidal]

admonitions

[!NOTE]
Highlights information that users should take into account, even when skimming.

[!TIP] Optional information to help a user be more successful.

[!IMPORTANT]
Crucial information necessary for users to succeed.

[!WARNING]
Critical content demanding immediate user attention due to potential risks.

[!CAUTION] Negative potential consequences of an action.