Mariam Thalos

Start from a structural template

…or start from a protocol in the book

Diagram code

The preview updates as you type. New to this? Open the quick guide below.

How to write a diagram — a 2-minute guide

A diagram is just a list of nodes (boxes) joined by arrows. Every diagram begins with a direction line:

flowchart TD	← top-to-down
flowchart LR	← left-to-right

Making nodes and arrows

Give each node a short label in quotes, and connect them with -->:

flowchart TD
    A["First idea"] --> B["Second idea"]
    B --> C["Conclusion"]

The letters (A, B, C) are just internal names — they don't appear in the diagram. Re-using a name points back to the same box.

Branching (one node, several paths)

Point one node at several others. Use a { } node to mark a question:

flowchart TD
    A["Observation"] --> Q{"Does it fit?"}
    Q -->|"Yes"| Y["Keep belief"]
    Q -->|"No"|  N["Revise belief"]

The text between the bars — |"Yes"| — is the label on the arrow.

Kinds of nodes

The brackets around the label decide the box's shape:

A["text"]Rectangle — a step or claim
A("text")Rounded — a state or input
A{"text"}Diamond — a decision / question
A(["text"])Stadium — a start or end point
A[["text"]]Subroutine — a sub-process
A[("text")]Cylinder — a store of data

A few handy extras

A --> B & CA points to both B and C
A -.-> BDotted arrow
A ==> BThick arrow
A --- BPlain line, no arrowhead
%% a commentIgnored — a note to yourself

Protocol details

Hold Ctrl / Cmd to select multiple
Your diagram will appear here.

Submitted protocols are reviewed before appearing publicly in the Collaboratory.