Mermaid Diagrams: Show How It Works, Right in the Document
Mermaid blocks render as diagrams, with editable source and a larger view for detailed flows.
By David Hemphill ·
A sequence or state transition is often easier to follow as a diagram than as a paragraph describing every arrow. Livemark now renders Mermaid code blocks as diagrams in the document, with the source still available to edit.
Use a block marked mermaid to describe a flow, sequence, or state diagram. Readers get the picture in the context of the surrounding writing, and can put the source away when they only need to understand the result. The diagram fits its column; when the detail needs more space, a larger view gives it room.
For a specification, that means the request flow and the requirements can live together. A reviewer can compare the prose with the sequence rather than switch to another artifact and hope both versions still agree. Changing the diagram means changing its source in the document, not replacing an unrelated exported image.
This is Mermaid rendering, not a free-form diagram canvas. Keep the source understandable and check that the rendered flow says what the surrounding text claims.
Open a document and add a Mermaid block where order or state needs explaining.