🌐 Qwiki Manual
User Guide / Authoring & Content Formats / Diagrams, Math Formulas & Embedded Videos

Diagrams, Math Formulas & Embedded Videos

Beyond headings, tables, and callouts, Standalone Qwiki renders diagrams, mathematical notation, and responsive video players natively in Markdown.

Mermaid Diagrams

Wrap any Mermaid diagram in a fenced mermaid code block:

```mermaid
flowchart TD
    Draft["Draft (Authors Only)"] --> Review["In Review"]
    Review --> Published["Published (Visible to Readers)"]
```

Interactive Diagram Controls

Every rendered Mermaid diagram automatically includes:

  • Inline zoom (+ / - / reset) right on the page.
  • 1-click SVG download so readers can export crisp vector graphics.
  • Full-screen pan/zoom lightbox for inspecting large architecture diagrams.
Tip

Always enclose Mermaid node labels containing spaces, parentheses, brackets, or colons in double quotes (for example, A["Save (Draft)"]) so diagrams render cleanly across both Qwiki and qwiki-builder validate.

Mathematical Formulas (KaTeX & Symbol Shorthand)

Standalone Qwiki supports both inline and display LaTeX/KaTeX equations:

  • Inline math: Wrap an expression in single dollar signs: $E = mc^2$ or $\sum_{i=1}^n x_i$.
  • Currency protection: Plain currency amounts like $50, $1,000, or $4.99 are automatically left as literal textβ€”never mistaken for math.
  • Display math blocks: Wrap multi-line or centered equations in double dollar signs:
$$
\text{Availability} = \frac{\text{MTBF}}{\text{MTBF} + \text{MTTR}} \times 100\%
$$
  • Symbol shorthand normalization: Common mathematical symbols written as $to$, \to, \approx, \alpha, \le, \ge, \neq, \infty, and Greek letters normalize cleanly into crisp Unicode symbols alongside KaTeX rendering.

Playable Video Auto-Embedding

To embed a responsive video player, place a supported video URL or local video link on its own line in Markdown:

Source Example Standalone Line Behavior
YouTube (including Shorts & timestamps) https://www.youtube.com/watch?v=VIDEO_ID&t=42s Privacy-enhanced youtube-nocookie.com responsive embed
Vimeo https://vimeo.com/123456789 Responsive iframe with Do Not Track (dnt=1)
Loom https://www.loom.com/share/SHARE_ID Responsive Loom screencast player
Local / Direct Video [Walkthrough Demo](https://example.com/demo.mp4) (or relative `assets/videos/.mp4`)* Responsive HTML5 <video controls> player (.mp4, .webm, .ogg, .ogv, .mov)
Note

Placing a video URL inline inside a sentence (like Watch [this video](https://vimeo.com/123)) keeps it as a normal clickable link; placing it alone on its own line converts it into an embedded player.