Mermaid

Source code for examples/markdown/mermaid.py

Tip: paste this code into an empty cell, and the marimo editor will create cells for you

# /// script
# requires-python = ">=3.11"
# dependencies = [
#     "marimo",
# ]
# ///

import marimo

__generated_with = "0.8.19"
app = marimo.App()


@app.cell
def __():
    import marimo as mo
    return (mo,)


@app.cell
def __(mo):
    mo.mermaid(
        """
    graph TD
        A[Enter Chart Definition] --> B(Preview)
        B --> C{decide}
        C --> D[Keep]
        C --> E[Edit Definition]
        E --> B
        D --> F[Save Image and Code]
        F --> B
    """
    ).center()
    return


@app.cell
def __(mo):
    graph = mo.ui.code_editor(
        value="""sequenceDiagram
        Alice->>John: Hello John, how are you?
        John-->>Alice: Great!
        Alice-)John: See you later!""",
        language="mermaid",
        label="Mermaid editor",
    )
    graph
    return (graph,)


@app.cell
def __(graph, mo):
    mo.md(
        f"""
        You can render mermaid directly inside `mo.md`. Using

        `mo.mermaid()`

        {mo.mermaid(graph.value)}
        """
    )
    return


if __name__ == "__main__":
    app.run()