The Visual Markdown Wiki

A practical pattern library for making Markdown wikis easier to navigate, faster to scan, and more expressive.

Start here	Explore	Build
Choose a navigation pattern	Browse Mermaid patterns	Copy a page template
Design an at-a-glance page	See creative use cases	Use the diagram chooser

---

Wiki map

flowchart LR
    HOME["🏠 Home"]
    NAV["🧭 Navigation<br/>patterns"]
    GLANCE["👁️ At-a-glance<br/>pages"]
    MERMAID["🧩 Mermaid<br/>patterns"]
    USES["✨ Creative<br/>use cases"]
    TEMPLATE["📄 Reusable<br/>template"]

    HOME --> NAV
    HOME --> GLANCE
    HOME --> MERMAID
    HOME --> USES
    NAV -. "apply" .-> TEMPLATE
    GLANCE -. "compose" .-> TEMPLATE
    MERMAID -. "copy" .-> TEMPLATE

    click NAV "pages/navigation-patterns.md" "Open navigation patterns"
    click GLANCE "pages/at-a-glance-pages.md" "Open at-a-glance pages"
    click MERMAID "pages/mermaid-patterns.md" "Open Mermaid patterns"
    click USES "pages/creative-use-cases.md" "Open creative use cases"
    click TEMPLATE "templates/visual-wiki-page.md" "Open the template"

Loading

Tip

Mermaid links are convenient, but not every renderer enables them. The table above remains the dependable navigation layer.

Diagram chooser

If you want to show…	Reach for…	Example
Where readers can go	flowchart	Visual table of contents
A process or decision	flowchart	Decision tree
Events through time	timeline	Living project history
Who interacts with what	sequenceDiagram	Reader journey
Concepts and relationships	mindmap	Idea landscape
States and transitions	stateDiagram-v2	Document lifecycle
Work over a schedule	gantt	Roadmap
Relative quantities	pie or xychart-beta	Evidence snapshot

The core pattern

Every useful wiki page should answer three questions within one screen:

1. Where am I? — breadcrumb, title, and one-sentence purpose.
2. What is here? — summary, status, or visual overview.
3. Where can I go next? — contextual links, related pages, and a clear return path.

flowchart LR
    A["Where am I?"] --> B["What is here?"] --> C["Where next?"]
    C -. "good navigation builds a loop" .-> A

Loading

---

_{Home · Navigation · At a glance · Mermaid · Creative uses}