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(`
${escapeHTML(err)}
`) + console.warn(err) + }) + .finally(() => { + if (window.viewAjaxCallback) window.viewAjaxCallback() + }) + } catch (err) { + $ele.append(`
${escapeHTML(err)}
`) + console.warn(err) + } + }) // image href new window(emoji not included) const images = view.find('img.raw[src]').removeClass('raw') images.each((key, value) => { @@ -926,6 +952,8 @@ function highlightRender (code, lang) { return `
${code}
` } else if (lang === 'abc') { return `
${code}
` + } else if (lang === 'vega') { + return `
${code}
` } const result = { value: code diff --git a/public/js/index.js b/public/js/index.js index 6d373dab..ad8f3a86 100644 --- a/public/js/index.js +++ b/public/js/index.js @@ -100,7 +100,7 @@ var cursorActivityDebounce = 50 var cursorAnimatePeriod = 100 var supportContainers = ['success', 'info', 'warning', 'danger', 'spoiler'] var supportCodeModes = ['javascript', 'typescript', 'jsx', 'htmlmixed', 'htmlembedded', 'css', 'xml', 'clike', 'clojure', 'ruby', 'python', 'shell', 'php', 'sql', 'haskell', 'coffeescript', 'yaml', 'pug', 'lua', 'cmake', 'nginx', 'perl', 'sass', 'r', 'dockerfile', 'tiddlywiki', 'mediawiki', 'go', 'gherkin'].concat(hljs.listLanguages()) -var supportCharts = ['sequence', 'flow', 'graphviz', 'mermaid', 'abc', 'plantuml'] +var supportCharts = ['sequence', 'flow', 'graphviz', 'mermaid', 'abc', 'plantuml', 'vega'] var supportHeaders = [ { text: '# h1', diff --git a/public/views/codimd/foot.ejs b/public/views/codimd/foot.ejs index 61bb10d6..babddf76 100644 --- a/public/views/codimd/foot.ejs +++ b/public/views/codimd/foot.ejs @@ -19,7 +19,10 @@ - + + + + <%- include ../build/index-scripts %> <% } else { %> diff --git a/public/views/pretty.ejs b/public/views/pretty.ejs index 6bdcf9bc..28c67213 100644 --- a/public/views/pretty.ejs +++ b/public/views/pretty.ejs @@ -88,7 +88,10 @@ - + + + + <%- include build/pretty-scripts %> <% } else { %> diff --git a/public/views/slide.ejs b/public/views/slide.ejs index a510e9f9..4644406f 100644 --- a/public/views/slide.ejs +++ b/public/views/slide.ejs @@ -104,7 +104,10 @@ - + + + + <%- include build/slide-scripts %> <% } else { %> diff --git a/webpack.common.js b/webpack.common.js index 5da58258..a7fe2b86 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -257,6 +257,9 @@ module.exports = { 'imports-loader?Raphael=raphael!js-sequence-diagrams', 'expose-loader?Viz!viz.js', 'script-loader!abcjs', + 'script-loader!vega', + 'script-loader!vega-lite', + 'script-loader!vega-embed', 'expose-loader?io!socket.io-client', 'expose-loader?RevealMarkdown!reveal-markdown', path.join(__dirname, 'public/js/index.js') @@ -292,6 +295,9 @@ module.exports = { 'imports-loader?Raphael=raphael!js-sequence-diagrams', 'expose-loader?Viz!viz.js', 'script-loader!abcjs', + 'script-loader!vega', + 'script-loader!vega-lite', + 'script-loader!vega-embed', 'expose-loader?RevealMarkdown!reveal-markdown', path.join(__dirname, 'public/js/pretty.js') ], @@ -330,6 +336,9 @@ module.exports = { 'imports-loader?Raphael=raphael!js-sequence-diagrams', 'expose-loader?Viz!viz.js', 'script-loader!abcjs', + 'script-loader!vega', + 'script-loader!vega-lite', + 'script-loader!vega-embed', 'headjs', 'expose-loader?Reveal!reveal.js', 'expose-loader?RevealMarkdown!reveal-markdown', @@ -362,7 +371,10 @@ module.exports = { 'reveal-markdown': path.join(__dirname, 'public/js/reveal-markdown.js'), abcjs: path.join(__dirname, 'public/vendor/abcjs_basic_3.1.1-min.js'), raphael: path.join(__dirname, 'node_modules/raphael/raphael.min.js'), - 'js-sequence-diagrams': path.join(__dirname, 'node_modules/@hackmd/js-sequence-diagrams/build/main.js') + 'js-sequence-diagrams': path.join(__dirname, 'node_modules/@hackmd/js-sequence-diagrams/build/main.js'), + vega: path.join(__dirname, 'node_modules/vega/build/vega.min.js'), + 'vega-lite': path.join(__dirname, 'node_modules/vega-lite/build/vega-lite.min.js'), + 'vega-embed': path.join(__dirname, 'node_modules/vega-embed/build/vega-embed.min.js') } },