Advanced Markdown: Footnotes, Mermaid Diagrams, Math Formulas, and More

Basic Markdown gets you 80% of the way there. But the remaining 20% — footnotes, diagrams, math formulas, and interactive elements — is what separates a good document from a great one.

This guide covers the advanced Markdown features that most tutorials skip. Not all of them work everywhere (we will show you exactly where each one is supported), but mastering these will make your documentation, blog posts, and technical writing stand out.

To test any of these features in real time, use the MarkdownMaster online editor with live preview.

Footnotes

Footnotes let you add citations, clarifications, or asides without cluttering the main text. They are supported by most Markdown renderers, including GitHub, Pandoc, and many static site generators.

Syntax:

Here's a statement that needs a footnote.[^1]

More text here.

[^1]: This is the footnote content. It appears at the bottom of the document.

How it renders: The [^1] in the text becomes a superscript link. Clicking it jumps to the footnote definition at the bottom of the document. Clicking the footnote's ↑ link jumps back to the reference point.

You can have multiple footnotes in a single document:

Markdown is great for formatting[^formatting]. It also supports tables[^tables].

[^formatting]: Bold, italic, strikethrough, and inline code.
[^tables]: GitHub-flavored Markdown includes table syntax.

Tips:

• Use descriptive labels like [^security-note] instead of numbers — easier to manage in long documents
• Footnotes can contain multiple paragraphs. Indent the second paragraph with two spaces
• Footnote references can appear anywhere in the text — mid-sentence, in tables, even inside blockquotes
• GitHub renders footnotes correctly in Markdown files (README, wiki) but not in comments or issues

Mermaid Diagrams

Mermaid is a JavaScript-based diagramming tool that renders text definitions into diagrams. Write the diagram in plain text inside a code block with the mermaid language identifier, and compatible renderers turn it into a chart.

GitHub, GitLab, Notion, Obsidian, and many documentation tools support Mermaid natively. Note: The MarkdownMaster editor does not render Mermaid in the preview pane yet, but the exported HTML can include a Mermaid renderer.

Flowcharts

Flowcharts show processes, workflows, or decision trees. They are one of the most common diagram types in technical documentation.

```mermaid
graph TD
    A[Start] --> B{Is it Markdown?};
    B -->|Yes| C[Use MarkdownMaster];
    B -->|No| D[Convert to Markdown];
    C --> E[Export HTML/PDF/MD];
    D --> E;
    E --> F[✅ Done];
```

Key syntax elements:

• graph TD — Top-down direction. Use LR for left-to-right
• [] — Rectangle (process step)
• — Diamond (decision)
• () — Rounded rectangle (start/end)
• --> — Arrow (solid)
• -.-> — Dotted arrow
• ==> — Thick arrow
• Text on arrows: --Label text-->

Sequence Diagrams

Sequence diagrams show interactions between components over time. They are essential for documenting API flows, authentication workflows, and multi-service architectures.

```mermaid
sequenceDiagram
    participant User
    participant Editor
    participant Preview

    User->>Editor: Type Markdown
    Editor->>Preview: Parse & Render
    Preview-->>User: Show live preview
    User->>Editor: Click Export
    Editor->>User: Download HTML/MD file
```

Key syntax elements:

• participant — Declares an actor or system component
• ->> — Solid arrow (synchronous call)
• -->> — Dotted arrow (async response)
• --x — Loss/error arrow
• Note right/left of — Side notes on the diagram
• activate/deactivate — Show lifetime bars for actors

Gantt Charts

Gantt charts visualize project timelines and task dependencies. Useful for README roadmaps, project planning documents, and status updates.

```mermaid
gantt
    title Project Timeline
    dateFormat  YYYY-MM-DD
    section Planning
    Requirements    :done, 2026-01-01, 14d
    Design          :active, 2026-01-15, 21d
    section Development
    Frontend        :2026-02-05, 30d
    Backend         :2026-02-05, 30d
    section Release
    Testing         :2026-03-07, 14d
    Launch          :2026-03-21, 3d
```

Key syntax elements:

• dateFormat — Define the date format used in your tasks
• section — Group related tasks under a heading
• :done — Mark a task as completed
• :active — Mark task as currently in progress
• :crit — Mark as critical path
• Duration format: start, duration (e.g., 2026-01-01, 14d)

LaTeX Math Equations

Mathematical notation in Markdown uses LaTeX syntax, rendered by libraries like MathJax or KaTeX. GitHub, Jupyter Notebooks, Obsidian, and many academic platforms support this.

Inline math uses single dollar signs:

The quadratic formula: $$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$

Display math uses double dollar signs or \\[ ... \\]:

Inline math: $E = mc^2$

Block math:

$$
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
$$

Matrices:

\[
\begin{bmatrix}
1 & 0 & 0 \\
0 & 1 & 0 \\
0 & 0 & 1
\end{bmatrix}
\]

Piecewise functions:

\[
f(x) = \begin{cases}
x^2 & \text{if } x \geq 0 \\
-x^2 & \text{if } x < 0
\end{cases}
\]

Common LaTeX math commands:

> [!NOTE]
> Useful information that users should know.

> [!TIP]
> Helpful advice for doing things better.

> [!IMPORTANT]
> Crucial information that users must follow.

> [!WARNING]
> Content that could lead to problems if ignored.

> [!CAUTION]
> Potentially dangerous or destructive actions.

> [!note] Title
> Content here.

> [!warning] Security Warning
> Do not expose API keys in client-side code.

::: note
This is a note.
:::

::: warning
This is a warning.
:::

::: tip
**Pro tip:** You can nest Markdown inside containers, including code blocks and lists.
:::

Term One
: Definition of term one

Term Two
: Definition of term two
: Second definition for the same term

**Term**

  Definition here.

This text is ==highlighted== in yellow.

This text is <mark>highlighted</mark> in HTML.