Add support for mermaid.js syntax

[znicholasbrown]

Describe the current behavior

Wherever we support markdown we should also be able to support mermaidjs, which would significantly expand documentation options for deployments and work pools and would improve the quality of markdown artifacts.

Describe the proposed behavior

Wherever we support markdown, also support ```mermaid blocks like this:

\`\`\`mermaid
xychart
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
\`\`\`

which github and Cloud correctly render as:

xychart
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

Loading

Example Use

No response

Additional context

No response

[bkennedy-improving]

My use case for this is about showing tree view mapping of where data comes from for my crawling efforts.

Example:

flowchart TD
    N0["🌐 ROOT<br/>compass.maryland.gov/incentives<br/>type=html | md=4747"]
    N1["compass.maryland.gov/how-this-site-works<br/>depth=1 order=1<br/>type=html score=0.07<br/>md=1"]
    N0 --> N1
    N2["...yland.gov/programs/LAND/mining/Pages/index.aspx<br/>depth=1 order=2<br/>type=html score=0.07<br/>md=2455"]
    N3["www.mcet.org<br/>depth=2 order=5<br/>type=html score=0.00<br/>md=1127"]
    N2 --> N3
    N4["www.csmd.edu<br/>depth=2 order=6<br/>type=html score=0.00<br/>md=2090"]
    N2 --> N4
    N5["www.maryland.gov/pages/jobs.aspx<br/>depth=2 order=7<br/>type=html score=0.03<br/>md=2885"]
    N2 --> N5
    N6["...aryland.gov/programs/land/mining/Pages/mog.aspx<br/>depth=2 order=8<br/>type=html score=0.07<br/>md=1"]
    N2 --> N6
    N7["...yland.gov/programs/land/mining/pages/index.aspx<br/>depth=2 order=9<br/>type=html score=0.07<br/>md=1"]
    N2 --> N7
    N8["....md.us/comar/subtitle_chapters/26_Chapters.aspx<br/>depth=2 order=10<br/>type=html score=0.00<br/>md=149"]
    N2 --> N8
    N9["...yland.gov/programs/LAND/mining/Pages/index.aspx<br/>depth=2 order=11<br/>type=html score=0.07<br/>md=2455"]
    N2 --> N9
    N0 --> N2
    N10["compass.maryland.gov/methodology<br/>depth=1 order=3<br/>type=html score=0.05<br/>md=1"]
    N0 --> N10
    N11["compass.maryland.gov/incentives<br/>depth=1 order=4<br/>type=html score=0.08<br/>md=1"]
    N0 --> N11

    style N0 fill:#0f3460,stroke:#e94560,color:#fff
    style N1 fill:#533483,stroke:#e94560,color:#fff
    style N2 fill:#533483,stroke:#e94560,color:#fff
    style N3 fill:#533483,stroke:#e94560,color:#fff
    style N4 fill:#533483,stroke:#e94560,color:#fff
    style N5 fill:#533483,stroke:#e94560,color:#fff
    style N6 fill:#533483,stroke:#e94560,color:#fff
    style N7 fill:#533483,stroke:#e94560,color:#fff
    style N8 fill:#533483,stroke:#e94560,color:#fff
    style N9 fill:#533483,stroke:#e94560,color:#fff
    style N10 fill:#533483,stroke:#e94560,color:#fff
    style N11 fill:#533483,stroke:#e94560,color:#fff

Loading

Mermaid.js is very powerful though and could help provide visual feedback that's low storage costs since its rendered.