diff --git a/CHANGELOG.md b/CHANGELOG.md index c8102e5..749a889 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,11 @@ +# 0.10.0 / 2018-05-26 + +* added sphinx directive support + +# 0.9.0 / 2018-05-23 + +* added hugo shortcodes support + # 0.8.3 / 2018-02-09 * added Mermaid language contribution diff --git a/README.md b/README.md index 587592d..e8321a6 100644 --- a/README.md +++ b/README.md @@ -50,6 +50,22 @@ sequenceDiagram {{}} ``` +### Sphinx directives + +```html +.. mermaid:: + :parameters: are optional + + sequenceDiagram + A-->B: Works! +``` + +The plugin does not preview diagrams in external files: + +```html +.. mermaid:: graphs/mygraph.mmd +``` + ### Standalone Mermaid files Files with extension ``.mmd`` with plain Mermaid diagram content: diff --git a/lib/find-diagram.js b/lib/find-diagram.js index 70fcaf1..d6b42ba 100644 --- a/lib/find-diagram.js +++ b/lib/find-diagram.js @@ -33,10 +33,12 @@ function findDiagram(text, cursor) { const re = { html: /
([\s\S]*?)<\/div>/g, hugo: /\{\{\}\}([\s\S]*?)\{\{<\/mermaid>\}\}/g, - markdown: /```mermaid([\s\S]*?)```/g + markdown: /```mermaid([\s\S]*?)```/g, + sphinx: /\.\. mermaid::(?:[ \t]*)?$(?:(?:\n[ \t]+:(?:(?:\\:\s)|[^:])+:[^\n]*$)+\n)?((?:\n(?:[ \t][^\n]*)?$)+)?/gm }; return findDiagramWithRegExp(re.html, text, cursor) || findDiagramWithRegExp(re.markdown, text, cursor) - || findDiagramWithRegExp(re.hugo, text, cursor); + || findDiagramWithRegExp(re.hugo, text, cursor) + || findDiagramWithRegExp(re.sphinx, text, cursor); } diff --git a/package.json b/package.json index 25ff138..12150a5 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "vscode-mermaid-preview", "displayName": "Mermaid Preview", "description": "Previews Mermaid diagrams in Visual Studio Code", - "version": "0.9.0", + "version": "0.10.0", "publisher": "vstirbu", "bugs": { "url": "https://github.com/vstirbu/vscode-mermaid-preview/issues" diff --git a/test/fixtures/example.sphinx b/test/fixtures/example.sphinx new file mode 100644 index 0000000..625fb29 --- /dev/null +++ b/test/fixtures/example.sphinx @@ -0,0 +1,90 @@ + +A diagram: + +.. mermaid:: + sequenceDiagram + participant Alice + participant Bob + Alice->John: Hello John, how are you? + loop Healthcheck + John->John: Fight against hypochondria + end + Note right of John: Rational thoughts
prevail... + John-->Alice: Great! + John->Bob: How about you? + + + Bob-->John: Jolly good! + +A random paragraph. + +A diagram with parameters (the parameters can't be considered as part of the mermaid markup): + +.. mermaid:: + :alt: The image alternate text for HTML output + :align: center + :caption: Caption Text underneath the generated image + + sequenceDiagram + participant Alice + participant Bob + Alice->John: Hello John, how are you? + loop Healthcheck + John->John: Fight against hypochondria + end + Note right of John: Rational thoughts
prevail... + John-->Alice: Great! + John->Bob: How about you? + + + + Bob-->John: Jolly good! + +A diagram on an external file. You might decide not to match it, as the file itself can be previewed easily: + +.. mermaid:: graphs/mygraph.mmd + +Another diagram on an external file. Now with parameters: + +.. mermaid:: graphs/mygraph.mmd + :alt: The image alternate text for HTML output + :align: center + :caption: Caption Text underneath the generated image + +Two diagrams one after the other. Should be matched separately. The file ends with no paragraph after the last diagram: + +.. mermaid:: + sequenceDiagram + participant Alice + participant Bob + Alice->John: Hello John, how are you? + loop Healthcheck + John->John: Fight against hypochondria + end + Note right of John: Rational thoughts
prevail... + John-->Alice: Great! + John->Bob: How about you? + + + Bob-->John: Jolly good! + +.. mermaid:: + :go home: + :alt: The image alternate text for HTML output + :align: center + :caption: Caption Text underneath the generated image + + sequenceDiagram + participant Alice + participant Bob + Alice->John: Hello John, how are you? + loop Healthcheck + John->John: Fight against hypochondria + end + Note right of John: Rational thoughts
prevail... + John-->Alice: Great! + John->Bob: How about you? + + + + Bob-->John: Jolly good! \ No newline at end of file diff --git a/test/utils.test.js b/test/utils.test.js index 25d3e1d..6169df1 100644 --- a/test/utils.test.js +++ b/test/utils.test.js @@ -1,6 +1,7 @@ const path = require('path'); const assert = require('assert'); const vscode = require('vscode'); +const mermaid = require('mermaid'); const findDiagram = require('../lib/find-diagram'); const usesFontawesome = require('../lib/uses-fontawesome'); @@ -15,7 +16,7 @@ suite('Utilities Tests', () => { const openTextDocument = filename => vscode.workspace.openTextDocument(vscode.Uri.file(getAbsoluteFilePath(filename))); suite('findDiagram', () => { - suite('markdown', () => { + suite('markdown fenced code', () => { test('Detects fenced diagram if cursor inside fence', () => openTextDocument('sequence.md').then(document => { assert.ok(findDiagram(document.getText(), startFenced.length)); @@ -43,7 +44,7 @@ suite('Utilities Tests', () => { ); }); - suite('hugo', () => { + suite('hugo shortcodes', () => { test('Detects hugo diagram if cursor inside tag', () => openTextDocument('hugo.html').then(document => { assert.ok(findDiagram(document.getText(), startHugo.length)); @@ -57,6 +58,27 @@ suite('Utilities Tests', () => { ); }); + suite('sphinx directive', () => { + test('Detects diagram', () => + openTextDocument('example.sphinx').then(document => { + assert.doesNotThrow(() => + mermaid.parse(findDiagram(document.getText(), 25)) + )}) + ); + + test('Detects diagram with parameters', () => + openTextDocument('example.sphinx').then(document => { + assert.doesNotThrow(() => + mermaid.parse(findDiagram(document.getText(), 625)) + )}) + ); + + test('Does not detect diagram defined in externl file', () => + openTextDocument('example.sphinx').then(document => { + assert.equal(findDiagram(document.getText(), 1113), undefined); + }) + ); + }); }); suite('usesFontawesome', () => {