Mermaid.js lets you create diagrams using a simple and readable syntax. To write Mermaid diagrams, you use a code block that signals to Mermaid what kind of diagram you want to create. This code block starts with three backticks followed by the word mermaid. Everything you write inside this block will be interpreted as Mermaid syntax. The basic structure for a flowchart in Mermaid uses the flowchart keyword, followed by the direction of the flow, such as TD for top-down or LR for left-to-right. Inside the code block, you define nodes (steps or actions) and connect them with arrows to show the flow of your process.

Let's break down the flowchart syntax in the example above. The first line, flowchart TD, tells Mermaid to create a flowchart with a top-down layout. Each node is defined by a letter and a label in square brackets, such as A[Start]. Nodes are connected using arrows—-->—showing the direction from one step to the next. For decisions, curly braces are used for the label, like B{Is it sunny?}, and different outcomes are connected with labeled arrows, such as B -- Yes --> C[Go outside] and B -- No --> D[Stay inside]. All paths eventually lead to the final node E[Have fun!], demonstrating how to build a simple decision flow using Mermaid syntax.