Advanced Markdown

Explore the extended syntax supported by this site: Mermaid diagrams, KaTeX math, superscripts, subscripts and footnotes. Copy any example into the editor to try it.

Mermaid diagrams

Code blocks marked mermaid render as diagrams. Start with flowchart and a direction: LR for left to right or TD for top to bottom.

Write nodes as id[Display text] and connect them with -->. The identifier connects nodes; the text in brackets appears in the diagram.

Flowcharts

Flowcharts describe steps, decisions and outcomes. Braces create decision nodes; |Text| on a connection labels a branch.

```mermaid
flowchart TD
  Start([Start]) --> Write[Write content]
  Write --> Check{Checks passed?}
  Check -->|Yes| Publish[Publish document]
  Check -->|No| Revise[Revise content]
  Revise --> Check
  Publish --> End([End])
```

Result:

Fishbone diagrams

Fishbone diagrams analyze possible causes of a problem. This site uses compatible flowchart syntax: a horizontal chain forms the backbone, causes connect to its joints, and the chain leads to the outcome.

```mermaid
flowchart LR
  Bone1(( )) --> Bone2(( )) --> Bone3(( )) --> Result[Inconsistent product quality]
  People[People: insufficient training] --> Bone1
  Material[Materials: batch variation] --> Bone1
  Method[Methods: unclear process] --> Bone2
  Machine[Equipment: poor maintenance] --> Bone2
  Measure[Measurement: inconsistent standards] --> Bone3
  Environment[Environment: temperature and humidity] --> Bone3
```

Result:

Mind maps

Mind maps branch out from a central topic. Use double parentheses to emphasize the center, then connect topics and details in successive levels.

```mermaid
flowchart TD
  Root((Content plan))
  Root --> Goal[Goal]
  Root --> Audience[Audience]
  Root --> Structure[Structure]
  Goal --> Explain[Explain concepts]
  Goal --> Guide[Guide actions]
  Audience --> Beginner[Beginners]
  Audience --> Team[Team members]
  Structure --> Intro[Introduction]
  Structure --> Body[Body]
  Structure --> Summary[Summary]
```

Result:

Superscripts

Wrap superscript text in ^ without spaces inside the delimiters.

30^th^ and x^2^

Result: 30^th and x².

Subscripts

Wrap subscript text in ~ without spaces inside the delimiters.

H~2~O and CO~2~

Result: H₂O and CO₂.

Math formulas

Math uses LaTeX syntax and renders directly on this site. Wrap inline formulas in $; use $$ for longer expressions displayed on their own line.

In math, ^ and _ denote superscripts and subscripts. Group multiple characters with braces, as in x^{10} or a_{n+1}. This differs from the ^superscript^ and ~subscript~ syntax used in ordinary text.

Inline math

Inline formulas fit within a sentence. Keep the delimiters and expression on the same line.

Mass–energy equivalence $E = mc^2$, the area of a circle $S = \pi r^2$, and a sequence term $a_{n+1}$.

Result: Mass–energy equivalence $E = mc^2$, the area of a circle $S = \pi r^2$, and a sequence term $a_{n+1}$.

Display math

Display math works well for fractions, sums, integrals and derivations. Put each opening and closing $$ on its own line.

$$
\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$

Result:

Multiline equations

Use the aligned environment for multiple equations. & marks alignment points and \\ starts a new line.

$$
\begin{aligned}
(a+b)^2 &= a^2 + 2ab + b^2 \\
(a-b)^2 &= a^2 - 2ab + b^2
\end{aligned}
$$

Result:

Common expressions

Escape a literal dollar sign as \$ so it is not treated as a math delimiter. Invalid formulas display an error in the preview, with an option to locate the source.

Footnotes

Add a footnote reference with [^name] and define it elsewhere using [^name]:. The name links the two parts and is not shown to readers.

This sentence needs an additional explanation.[^note]

[^note]: This is the footnote text.

Result below. Click the footnote number to jump to the bottom, then use the return symbol to go back.

This sentence needs an additional explanation.^[1]