Add support for Mermaid.js diagrams

[gcushen]

Also, refer to the current diagram recommendations at https://sourcethemes.com/academic/docs/writing-markdown-latex/#diagrams .

Docs

To create a diagram or flowchart:

Add diagram: true to a page's YAML front matter.

Add Mermaid diagram syntax to the content of a page, wrapping it in the new Diagram shortcode:

{{< diagram >}}
graph LR;
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
{{< /diagram >}}

Future work

For case where day/night mode is enabled and toggled by visitor, we don't require a page refresh if we keep track of the graph_data for each .mermaid div prior to the first init of Mermaid.js and then apply a different day/night theme on that data:

$('#mermaid').html(graph_data).removeAttr('data-processed');
mermaid.init({ theme: theme_name });

See mermaid-js/mermaid#311 (comment)