Mermaid now working

Still needs refactoring to generalise the extension architecture.
This commit is contained in:
Simon Brooke 2017-07-30 23:25:24 +01:00
parent fd5cd11024
commit 9630e16d94
5 changed files with 71 additions and 5 deletions

View file

@ -57,6 +57,33 @@ Note that this visualisation will not be rendered in the GitHub wiki, as it does
![Example visualisation](https://github.com/simon-brooke/smeagol/blob/develop/resources/public/data/london.png?raw=true)
## Now with embedded graphs
Graphs can now be embedded in a page using the [Mermaid](http://knsv.github.io/mermaid/index.html) graph description language. The graph description should start with a line comprising three back-ticks and then the
word 'mermaid', and end with a line comprising just three backticks.
Here's an example culled from the Mermaid documentation.
### GANTT Chart
```mermaid
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
```
## Advertisement
If you like what you see here, I am available for work on open source Clojure projects.

View file

@ -1,18 +1,24 @@
{% extends "templates/base.html" %}
{% block extra-headers %}
<!-- there's at the time of writing (20170731) a problem with the dependencies of the Bower
package for vega-embed, so we're currently not installing either it or Vega locally.
TODO: fix -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.0-rc2/vega.js"></script>
<!-- there's at the time of writing (20170731) a problem with the dependencies of the Bower
package for vega-embed, so we're currently not installing either it or Vega locally. TODO: fix -->
{% script "/vendor/vega-lite/build/vega-lite.js" %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-beta.19/vega-embed.js"></script>
<style media="screen">
/* Add space between Vega-Embed links */
.vega-actions a {
margin-right: 5px;
}
</style>
<!-- Similarly, mermaid 7.0.3 isn't installing cleanly for me from Bower. I'm really not sure whether
the problem is me getting bower wrong, of these libraries not being well packaged.
mermaid 6.0.0 does install, so that's what I'm using. -->
{% style "vendor/mermaid/dist/mermaid.css" %}
{% script "vendor/mermaid/dist/mermaid.js" %}
{% endblock %}
{% block content %}
@ -25,4 +31,14 @@ package for vega-embed, so we're currently not installing either it or Vega loca
{% endif %}
{{content|safe}}
</div>
<script>
//<![CDATA[
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", function(event) {
mermaid.initialize({startOnLoad:true});
});
}
//]]
</script>
{% endblock %}