added support for sphinx directives (fixes #52)

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

README.md

@@ -50,6 +50,22 @@ sequenceDiagram
 {{</mermaid>}}
 ```
 
+### 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:

lib/find-diagram.js

@@ -33,10 +33,12 @@ function findDiagram(text, cursor) {
   const re = {
     html: /<div class="mermaid">([\s\S]*?)<\/div>/g,
     hugo: /\{\{<mermaid.*>\}\}([\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);
 }

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"

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 <br/>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 <br/>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 <br/>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 <br/>prevail...
+      John-->Alice: Great!
+      John->Bob: How about you?
+
+
+
+      Bob-->John: Jolly good!

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', () => {