Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/xykong/flux-markdown/llms.txt

Use this file to discover all available pages before exploring further.

FluxMarkdown can render diagrams and charts inline — no external tools, no image exports. Place your diagram source inside a fenced code block with the appropriate language tag and FluxMarkdown converts it to an SVG on every preview. Mermaid, Vega, Vega-Lite, and Graphviz (DOT) are all supported.

​
Mermaid

Mermaid diagrams are rendered using the official mermaid library (v11). Use a mermaid code fence and write your diagram source directly:

Flowchart

Write the diagram source inside a mermaid code fence:Node labels can include \n for line breaks — FluxMarkdown pre-processes both quoted and unquoted labels automatically (see the newline note below).
Mermaid is loaded lazily and pre-warmed after first use. The second diagram in the same session renders in roughly 20 ms.

​
Newline handling

Mermaid v11 only converts \n to line breaks inside double-quoted labels (A["line1\nline2"]). FluxMarkdown pre-processes all three unquoted bracket styles before passing source to the renderer:
Node syntaxExample
Square bracketsA[line1\nline2]
Round bracketsA(line1\nline2)
Curly bracketsA{line1\nline2}
This means AI-generated diagrams with \n in node labels render correctly without manual edits. Participant aliases in sequence diagrams are also handled: participant U as "label\nline2" strips the quotes and converts the newline.

​
Vega and Vega-Lite

Vega and Vega-Lite specifications are written as JSON inside a vega or vega-lite code fence. The output is an interactive SVG that respects the active dark/light theme.
Vega-Lite offers a concise grammar for common chart types. Use a vega-lite code fence with a JSON specification:
vega-lite example
{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Simple bar chart",
  "data": {
    "values": [
      {"category": "A", "value": 28},
      {"category": "B", "value": 55},
      {"category": "C", "value": 43},
      {"category": "D", "value": 91}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "category", "type": "nominal"},
    "y": {"field": "value", "type": "quantitative"}
  }
}
In your Markdown file, use ```vega-lite as the opening fence tag.
The chart background is automatically set to #0d1117 in dark mode and #ffffff in light mode to match the document theme.

​
Graphviz (DOT)

Graphviz graphs are rendered via the @hpcc-js/wasm-graphviz WebAssembly module — no native Graphviz installation required. Use a dot or graphviz code fence: Use a dot or graphviz code fence with your DOT language graph definition: 
digraph Architecture {
    rankdir=LR
    node [shape=box style=filled fillcolor=lightblue]

    User [label="User (Finder)"]
    QL [label="QuickLook Extension"]
    WebView [label="WKWebView"]
    Renderer [label="TypeScript Renderer"]
    Output [label="Rendered Preview"]

    User -> QL [label="Space"]
    QL -> WebView [label="loadFileURL"]
    WebView -> Renderer [label="renderMarkdown()"]
    Renderer -> Output [label="HTML + SVG"]
}
Both dot and graphviz are accepted as the language tag — they are treated identically.

​
.mmd file support

FluxMarkdown registers the .mmd extension in addition to standard Markdown extensions. When you open a .mmd file, its entire contents are automatically wrapped in a mermaid code fence before rendering — you do not need to add any surrounding syntax. This lets you maintain standalone Mermaid diagram files (useful alongside architecture documentation or in diagram-focused directories) and preview them instantly with Space in Finder.
All Mermaid diagram types are supported in .mmd files: flowchart, sequenceDiagram, gantt, classDiagram, erDiagram, pie, gitGraph, and more.

Markdown rendering

GFM, KaTeX math, syntax highlighting, and extended syntax

Export

Export your diagrams to PDF or standalone HTML

Build docs developers (and LLMs) love

Get started for freeTalk to us