Diagram

exported by ox-hugo on Org_Mode & Emacs Currently, Hextra supports Mermaid for diagrams.

Mermaid

Mermaid is a JavaScript based diagramming and charting tool that takes Markdown-inspired text definitions and creates diagrams dynamically in the browser. For example, Mermaid can render flow charts, sequence diagrams, pie charts and more.

Using Mermaid in Hextra is as simple as writing a code block with language set mermaid:

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```
graph TD; A-->B; A-->C; B-->D; C-->D;

Sequence diagram:

sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts
prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

For more information, please refer to Mermaid Documentation.

Srcblock vs. Shortcode in Emacs

  • srcblock mermaid with ob-mermaid
    • syntax highlighting in srcblock
    • caption
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
Code Snippet 1: TD
마지막 수정일자