Photo by Giorgio Tomassetti on Unsplash

Rich Charts and Graphs in Markdown

AnyWhichWay
3 min readMay 10, 2022

--

There are a number of tools for including charts and graphs in Markdown files using plain text, these include Mermaid, JS-Sequence-Diagrams, Flowchart.js, Graphviz, ABC.

The downside of these tools is authors may have to learn several different markups, some of which although powerful and effective are a bit obscure.

An alternative is to use HTML in markdown files, however defining charts and graphs in straight HTML is rather cumbersome and dramatically reduces the “clean” nature of Markdown.

You could also use HTML along with JavaScript and something like Google Charts, since you can also include JavaScript files in Markdown. Unfortunately, most chart libraries require a substantive knowledge of JavaScript to use effectively and there are a lot of potential authors that lack this skills. And, once again, you will clutter-up the Markdown file.

And you could, of course, include images of the charts and graphs you want to use. But this makes them cumbersome to update.

There is final alternative, web components that support declarative definition outside the context of attributes and sub-tags through the use of JSON, for example:

<l-chart id="myChart" type="PieChart" style="height:500px;" title="How Much Pizza I Ate Last Night">
{
options: { }…

--

--

AnyWhichWay

Changing Possible ... currently from the clouds around Seattle.