feat(components): ✨ add graphviz graphs rendering

content/syntax/custom_components.md

@@ -211,6 +211,8 @@ Organization _MSF_ is helping society a lot.
 
 ## Diagrams
 
+### Mermaid
+
 ```mermaid
 graph TD
 	A[Christmas] -->|Get money| B(Go shopping)
@@ -220,6 +222,31 @@ graph TD
 	C -->|Three| F[fa:fa-car Car]
 ```
 
+### Graphviz
+
+```dot
+digraph graphname {
+  a -> b;
+  b -> c;
+  a -> c;
+}
+```
+
+```dot
+graph mygraph {
+    rankdir=LR
+    label="My Graph"
+    a -- b[color=red,penwidth=3.0];
+    b -- c;
+    c -- d[color=red,penwidth=3.0];
+    d -- e;
+    e -- f;
+    a -- d;
+    b -- d[color=blue,penwidth=2.0];
+    c -- f[color=blue,penwidth=2.0];
+}
+```
+
 ## Diff
 
 The following is a code block with diff. 

gatsby-config.js

@@ -67,23 +67,20 @@ const plugins = [
             mermaidOptions: config.features.mermaid.options
           }
         },
+        'gatsby-remark-graphviz',
+        'gatsby-remark-sectionize',
         {
           resolve: 'gatsby-remark-images',
           options: {
             maxWidth: 1035,
             sizeByPixelDensity: true,
           },
         },
-        {
-          resolve: 'gatsby-remark-copy-linked-files',
-        },
+        'gatsby-remark-copy-linked-files',
         {
           resolve: 'gatsby-remark-jargon',
           options: { jargon: require('./config/jargon-config.js') },
         },
-        {
-          resolve: 'gatsby-remark-sectionize',
-        },
         {
           resolve: `gatsby-remark-embed-snippet`,
           options: {

package.json

@@ -36,6 +36,7 @@
     "gatsby-plugin-sitemap": "2.4.3",
     "gatsby-remark-copy-linked-files": "2.3.3",
     "gatsby-remark-embed-snippet": "4.3.3",
+    "gatsby-remark-graphviz": "1.3.3",
     "gatsby-remark-images": "3.3.8",
     "gatsby-remark-jargon": "2.6.0",
     "gatsby-remark-mermaid": "2.0.0",

yarn.lock

@@ -7775,6 +7775,16 @@ gatsby-remark-embed-snippet@4.3.3:
     parse-numeric-range "^0.0.2"
     unist-util-map "^1.0.5"
 
+gatsby-remark-graphviz@1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/gatsby-remark-graphviz/-/gatsby-remark-graphviz-1.3.3.tgz#48c5dc4e0b053d34c12836d89e1ff814e74b114c"
+  integrity sha512-EgZOxESOKmOPyP+YJZb5yptf63XQw8++WO6kPLjUndGPG1LAepXKAQbLvaTG0C3gZGVwPLMDVwZUL8miPA4Xpg==
+  dependencies:
+    "@babel/runtime" "^7.10.2"
+    cheerio "^1.0.0-rc.3"
+    unist-util-visit "^1.4.1"
+    viz.js "^2.1.2"
+
 gatsby-remark-images@3.3.8:
   version "3.3.8"
   resolved "https://registry.yarnpkg.com/gatsby-remark-images/-/gatsby-remark-images-3.3.8.tgz#d5c6c0a1de8b6d843ac6bcbc6863a420644ff301"
@@ -16759,6 +16769,11 @@ vfile@^4.0.0:
     unist-util-stringify-position "^2.0.0"
     vfile-message "^2.0.0"
 
+viz.js@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/viz.js/-/viz.js-2.1.2.tgz#6f09cd4e10af28754a6d50b055bd2e4a7693983a"
+  integrity sha512-UO6CPAuEMJ8oNR0gLLNl+wUiIzQUsyUOp8SyyDKTqVRBtq7kk1VnFmIZW8QufjxGrGEuI+LVR7p/C7uEKy0LQw==
+
 vlq@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/vlq/-/vlq-1.0.1.tgz#c003f6e7c0b4c1edd623fd6ee50bbc0d6a1de468"