Render transitions as Mermaid

Question

Render transitions as Mermaid

Opened this issue 3 years ago · 2 comments

GitHub now supports Mermaid diagrams in Markdown text. See Mermaid syntax specifications.

Some benefits:

Can be rendered without Graphviz, which needs to be installed system-wide.
Related: can be rendered in the documentation with sphinxcontrib-mermaid.
Supports unicode.
Can be rendered in GitHub.

An example:

```mermaid
graph LR
    A["𝐽/𝜓"] --> N0[ ]
    N0 --> N1["𝑓₀(980)"]
    N0 --> 0["𝛾"]
    N1 --> 1["𝜋⁰"]
    N1 --> 2["𝜋⁰"]
    style A fill:#FFFFFF, stroke:#FFFFFF;
    style N0 fill:#FFFFFF, stroke:#FFFFFF;
    style N1 fill:#FFFFFF, stroke:#FFFFFF;
    style 0 fill:#FFFFFF, stroke:#FFFFFF;
    style 1 fill:#FFFFFF, stroke:#FFFFFF;
    style 2 fill:#FFFFFF, stroke:#FFFFFF;
```

graph LR
    A["𝐽/𝜓"] --> N0[ ]
    N0 --> N1["𝑓₀(980)"]
    N0 --> 0["𝛾"]
    N1 --> 1["𝜋⁰"]
    N1 --> 2["𝜋⁰"]
    style A fill:#FFFFFF, stroke:#FFFFFF;
    style N0 fill:#FFFFFF, stroke:#FFFFFF;
    style N1 fill:#FFFFFF, stroke:#FFFFFF;
    style 0 fill:#FFFFFF, stroke:#FFFFFF;
    style 1 fill:#FFFFFF, stroke:#FFFFFF;
    style 2 fill:#FFFFFF, stroke:#FFFFFF;

Answer 1 · 2024-05-06T10:24:58.000Z

Interesting 👀

Answer 2 · 2024-07-23T13:15:25.000Z

After suggestions by @grayson-helmholz @Smaldanerep1, this may look better:

```mermaid
graph LR
    N0["𝐽/𝜓"] --> N1["𝑓₀(980)"]
    N0["𝐽/𝜓"] --> 0["𝛾"]
    N1 --> 1["𝜋⁰"]
    N1 --> 2["𝜋⁰"]
    style N0 fill:#FFFFFF, stroke:#FFFFFF;
    style N1 fill:#FFFFFF, stroke:#FFFFFF;
    style 0 fill:#FFFFFF, stroke:#FFFFFF;
    style 1 fill:#FFFFFF, stroke:#FFFFFF;
    style 2 fill:#FFFFFF, stroke:#FFFFFF;
```

graph LR
    N0["𝐽/𝜓"] --> N1["𝑓₀(980)"]
    N0["𝐽/𝜓"] --> 0["𝛾"]
    N1 --> 1["𝜋⁰"]
    N1 --> 2["𝜋⁰"]
    style N0 fill:#FFFFFF, stroke:#FFFFFF;
    style N1 fill:#FFFFFF, stroke:#FFFFFF;
    style 0 fill:#FFFFFF, stroke:#FFFFFF;
    style 1 fill:#FFFFFF, stroke:#FFFFFF;
    style 2 fill:#FFFFFF, stroke:#FFFFFF;