Open Thorium opened 1 year ago
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
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.
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)
@nojaf solution sounds simple enough. Maybe even using pre
instead of div
so that GitHub parser described above would also pick the rendering.
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.