diff --git a/package.json b/package.json index ff513848..829cb1fb 100644 --- a/package.json +++ b/package.json @@ -138,6 +138,9 @@ "turndown": "~5.0.3", "uuid": "~3.3.2", "validator": "~11.1.0", + "vega": "~5.4.0", + "vega-embed": "~4.2.2", + "vega-lite": "~3.4.0", "velocity-animate": "~1.5.2", "visibilityjs": "~2.0.2", "viz.js": "~2.1.2", diff --git a/public/css/markdown.css b/public/css/markdown.css index 23ed6bab..5cb32d14 100644 --- a/public/css/markdown.css +++ b/public/css/markdown.css @@ -126,7 +126,8 @@ .markdown-body pre.sequence-diagram, .markdown-body pre.graphviz, .markdown-body pre.mermaid, -.markdown-body pre.abc { +.markdown-body pre.abc, +.markdown-body pre.vega { text-align: center; background-color: inherit; border-radius: 0; @@ -147,7 +148,8 @@ .markdown-body pre.sequence-diagram > code, .markdown-body pre.graphviz > code, .markdown-body pre.mermaid > code, -.markdown-body pre.abc > code { +.markdown-body pre.abc > code, +.markdown-body pre.vega > code { text-align: left; } @@ -155,7 +157,8 @@ .markdown-body pre.sequence-diagram > svg, .markdown-body pre.graphviz > svg, .markdown-body pre.mermaid > svg, -.markdown-body pre.abc > svg { +.markdown-body pre.abc > svg, +.markdown-body pre.vega > svg { max-width: 100%; height: 100%; } diff --git a/public/css/slide.css b/public/css/slide.css index f8f9c717..0c84ce47 100644 --- a/public/css/slide.css +++ b/public/css/slide.css @@ -223,7 +223,8 @@ pre.flow-chart, pre.sequence-diagram, pre.graphviz, pre.mermaid, -pre.abc { +pre.abc, +pre.vega { text-align: center; background-color: white; border-radius: 0; @@ -234,7 +235,8 @@ pre.flow-chart > code, pre.sequence-diagram > code, pre.graphviz > code, pre.mermaid > code, -pre.abc > code { +pre.abc > code, +pre.vega > code { text-align: left; } @@ -242,7 +244,8 @@ pre.flow-chart > svg, pre.sequence-diagram > svg, pre.graphviz > svg, pre.mermaid > svg, -pre.abc > svg { +pre.abc > svg, +pre.vega > svg { max-width: 100%; height: 100%; } diff --git a/public/docs/features.md b/public/docs/features.md index ee8ce18e..e93fb0c8 100644 --- a/public/docs/features.md +++ b/public/docs/features.md @@ -313,11 +313,45 @@ GABc dedB|dedB dedB|c2ec B2dB|A2F2 G4:| g2gf g2Bd|g2f2 e2d2|c2ec B2dB|A2F2 G4:| ``` +### PlantUML +```plantuml +start +if (condition A) then (yes) + :Text 1; +elseif (condition B) then (yes) + :Text 2; + stop +elseif (condition C) then (yes) + :Text 3; +elseif (condition D) then (yes) + :Text 4; +else (nothing) + :Text else; +endif +stop +``` + +### Vega-Lite +```vega +{ + "$schema": "https://vega.github.io/schema/vega-lite/v3.json", + "data": {"url": "https://vega.github.io/editor/data/barley.json"}, + "mark": "bar", + "encoding": { + "x": {"aggregate": "sum", "field": "yield", "type": "quantitative"}, + "y": {"field": "variety", "type": "nominal"}, + "color": {"field": "site", "type": "nominal"} + } +} +``` + > More information about **sequence diagrams** syntax [here](http://bramp.github.io/js-sequence-diagrams/). > More information about **flow charts** syntax [here](http://adrai.github.io/flowchart.js/). > More information about **graphviz** syntax [here](http://www.tonyballantyne.com/graphs.html) > More information about **mermaid** syntax [here](http://knsv.github.io/mermaid) > More information about **abc** syntax [here](http://abcnotation.com/learn) +> More information about **plantuml** syntax [here](http://plantuml.com/index) +> More information about **vega** syntax [here](https://vega.github.io/vega-lite/docs) Alert Area --- diff --git a/public/js/extra.js b/public/js/extra.js index 60ef9d5a..dd827d74 100644 --- a/public/js/extra.js +++ b/public/js/extra.js @@ -419,6 +419,32 @@ export function finishView (view) { console.warn(err) } }) + // vega-lite + const vegas = view.find('div.vega.raw').removeClass('raw') + vegas.each((key, value) => { + try { + var $value = $(value) + var $ele = $(value).parent().parent() + + const specText = $value.text() + + $value.unwrap() + window.vegaEmbed($ele[0], JSON.parse(specText)) + .then(result => { + $ele.addClass('vega') + }) + .catch(err => { + $ele.append(`