Mermaid.js examples

This page highlights the various types of diagrams that can be created using mermaid.js, displayed directly here without the need for exporting them as images.

Flowcharts

OONA Indonesia callback flow chart

flowchart TD
    A((Assessment <br/> Complete)) --> |Only for D2C cases| C{fa:fa-paper-plane Web-hook: Insure MO <br> Insure MO decision}
    C -->|Auto-Approve| D[fa:fa-paper-plane Web-hook: Review Complete]
    C -->|Auto-Reject| E[fa:fa-paper-plane Web-hook: Review Complete]
    C -->|Manual-Review| F(fa:fa-paper-plane Web-hook: Manual review)
    F -->G(Review using SSO review page)
    G -->|Approve/Reject| H[fa:fa-paper-plane Web-hook: Review Complete]

Flowchart with subgraphs :: RSGI Image Capture flow diagram

flowchart TD
    A((Welcome <br> Screen)) --> B(Get capture config)
    B --> |Manual Capture Only| CaptureImages(Capture All Images <br> One by One)

    subgraph CaptureImages
        direction LR
        I1(Capture an Image) ---> I2(Store in IndexedDB)
        --> |Next capture?| I1
    end
    subgraph UploadImages
        direction LR
        U1(Take Image from IndexedDB) ---> U2(Send Image to backend)
        --> |Next image?| U1
        ErrorScreen(Showing error message on <br> image-upload screen with progress bar <br> if the image upload fails)
    end

    CaptureImages --> |On capturing all images| UploadImages
    UploadImages --> |Assuming all the images are uploaded| FinalUpload(Final upload screen <br> TriNetra backend to CAAS API)
    FinalUpload --> FinalUploadResponse{API response}
    FinalUploadResponse --> |If API is success| RatingScreen
    FinalUploadResponse --> |If API errors out| HiccupErrorScreen[Hiccup Error Screen]