Process and state diagrams

Engineering notes often need a picture: a pipeline that explains how code reaches production, or a state machine that pins down the exact statuses an entity can hold. NoteThink renders Mermaid diagrams directly from fenced code blocks, so the diagram lives next to the prose it describes and stays in version control alongside everything else.

Release pipeline

The flowchart below models the continuous-delivery pipeline for a typical web service. A push to a feature branch runs the fast checks; once a pull request is opened and approved, the change is built into an image, deployed to staging for smoke tests, and only then promoted to production. The decision nodes capture where the pipeline can short-circuit and report back to the author.

flowchart TD
    push([Push to branch]) --> lint{Lint and unit tests pass?}
    lint -->|no| fail[Report failure on PR]
    lint -->|yes| review{PR approved?}
    review -->|changes requested| push
    review -->|approved| build[Build container image]

    subgraph staging [Staging]
        build --> deployStg[Deploy to staging]
        deployStg --> smoke{Smoke tests green?}
    end

    smoke -->|no| rollbackStg[Roll back staging] --> fail
    smoke -->|yes| approve{Manual promotion approved?}

    subgraph production [Production]
        approve -->|yes| deployProd[Deploy to production]
        deployProd --> health{Healthcheck green?}
    end

    approve -->|no| hold[Hold for release window]
    health -->|no| rollbackProd[Roll back production] --> fail
    health -->|yes| done([Live])

Labelled edges make the conditional paths explicit, and the two subgraphs separate the staging and production environments without forcing the reader to trace colours or legends.

Order lifecycle

State diagrams are the right tool when an entity moves through a fixed set of statuses and you care about which transitions are legal. The diagram below describes the lifecycle of a customer order. The Fulfilment state is composite: while an order is being fulfilled it is simultaneously packing and then shipping. A choice pseudostate decides, after payment, whether the order proceeds or is held for a fraud review.

stateDiagram-v2
    [*] --> Pending

    Pending --> PaymentCheck : submit payment
    state PaymentCheck <<choice>>
    PaymentCheck --> Fulfilment : approved
    PaymentCheck --> OnHold : flagged for review

    OnHold --> Fulfilment : cleared
    OnHold --> Cancelled : rejected

    state Fulfilment {
        [*] --> Packing
        Packing --> Shipping : handed to carrier
        Shipping --> [*] : delivered
    }

    Fulfilment --> Completed : delivery confirmed
    Pending --> Cancelled : customer cancels
    Completed --> [*]
    Cancelled --> [*]

The [*] markers anchor the start and end of the machine, the nested Packing and Shipping states live entirely inside Fulfilment, and the <<choice>> branch keeps the post-payment routing in one place rather than scattering it across edges.

Demonstrates NoteThink's inline Mermaid rendering - flowcharts and state diagrams drawn straight from fenced `mermaid code blocks in your notes.