Diagrams or charts in the documentation

[Thorium]

Question: What is the best practice of adding a diagram or a chart?

With GitHub they support Mermaid: https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/

However it doesn't render in fsdocs watch so I didn't try to push to gh-pages.

Is there any other better way to do similar kind of things? Like some F# charting library and generate the output?

I know SVG pictures can be added directly as markdown or as html img tags.

[thinkbeforecoding]

For my blog I perform a post processing on the markdown code quote marked with [lang=diag] , generating an image using a mermaid container, and replacing the code quote with an img tag: https://github.com/thinkbeforecoding/thinkbeforecoding/blob/master/src/build/Program.fs#L327

[nhirschey]

FsLab’s Cyjs should work. link. The repos docs/ folder has examples.

Btw, I assume you mean mermaid-like diagram. Otherwise Plotly.Net for other types of charts.

[nojaf]

In Fantomas we are using Mermaid by adding:

<script type="module">
      import mermaid from "https://cdn.skypack.dev/mermaid";
      mermaid.initialize({
          startOnLoad: true,
          theme: "base",
          themeVariables: {
              primaryColor: '#eff5f7'
          }
      });
  </script>

to our _template.html.

And then adding the graph as raw HTML in our Markdown:

<div class="mermaid text-center">
graph TD
    A[Fantomas.FCS] --> B
    B[Fantomas.Core] --> C[Fantomas]
    B --> D[Fantomas.Benchmarks]
    B --> E[Fantomas.Core.Tests]
    C --> F[Fantomas.Tests]
    G[Fantomas.Client]
 </div>

(sample)

[Thorium]

@nojaf solution sounds simple enough. Maybe even using pre instead of div so that GitHub parser described above would also pick the rendering.