コンテンツにスキップ

Mermaid は text で図を書く形式です。Oxiquill では fenced mermaid block が browser-rendered SVG diagram に変換されます。ページ側で import や custom component は不要です。

この flowchart は、本文、実行可能セル、静的サイト生成の関係を示します。

Mermaid flowchartDiagram source: flowchart LR Author[Author] --> MDX[MDX body] MDX --> Extract[Extract cells and diagrams] Extract --> Wasm[Compile Rust and Haskell cells to Wasm] Extract --> Mermaid[Register Mermaid diagrams] Wasm --> Build[Astro build] Mermaid --> Build Build --> Site[Static site]
Rendering diagram...

この sequence diagram は、読者がページを開き、input-driven cell を変更する流れを示します。

Mermaid sequence diagramDiagram source: sequenceDiagram participant Reader as Reader participant Page as Page participant Worker as Worker Reader->>Page: Open the page Page->>Worker: Run the cell with initial inputs Worker-->>Page: Return stdout and plots Reader->>Page: Change a slider Page->>Worker: Run again with new inputs Worker-->>Page: Return updated output
Rendering diagram...

この state diagram は、主な cell UI state を示します。

Mermaid state diagramDiagram source: stateDiagram-v2 [*] --> Waiting Waiting --> Running: Run Running --> Ready: Success Running --> Error: Failure Ready --> Running: Input changed Error --> Running: Run again
Rendering diagram...

Mermaid source は repository-owned MDX に置き、信頼できない外部入力を直接 render しないでください。