Support class diagram

README.md

@@ -40,7 +40,7 @@ The best way to support our development is to buy our apps.
 - Definition list
 - Emoji, Font Awesome icon
 - Mathematical formula, AsciiMath
-- Mermaid: Flowchart, Sequence diagram, Gantt diagram
+- Mermaid: Flowchart, Sequence diagram, Gantt diagram, Class diagram
 - Vim mode, Emacs mode
 - [Themes](https://github.com/tylingsoft/markdown-plus-themes)
 - [Plugins](https://github.com/tylingsoft/markdown-plus-plugins)
@@ -55,7 +55,7 @@ Optionally :star: this project, then:
 fork it
 git clone to your local
 yarn install
-yarn build
+yarn watch
 open dist/index.html in your browser
 ```
 

dist/sample.md

@@ -187,7 +187,9 @@ phi_n(kappa) = 1/(4pi^2 kappa^2)
 [AsciiMath Documentation](http://asciimath.org/)
 
 
-## Flowchart
+## mermaid charts
+
+### Flowchart
 
 ```mermaid
 graph TD
@@ -204,8 +206,7 @@ C -->|Three| F[Car]
 Adding many flowcharts will slow down the editor.
 :::
 
-
-## Sequence diagram
+### Sequence diagram
 
 ```mermaid
 sequenceDiagram
@@ -221,8 +222,7 @@ end
 Adding many sequence diagrams will slow down the editor.
 :::
 
-
-## Gantt diagram
+### Gantt diagram
 
 ```mermaid
 gantt
@@ -260,6 +260,31 @@ Add another diagram to demo page    : 48h
 Adding many gantt diagrams will slow down the editor.
 :::
 
+### Class diagram
+
+```mermaid
+classDiagram
+Class01 <|-- AveryLongClass : Cool
+Class03 *-- Class04
+Class05 o-- Class06
+Class07 .. Class08
+Class09 --> C2 : Where am i?
+Class09 --* C3
+Class09 --|> Class07
+Class07 : equals()
+Class07 : Object[] elementData
+Class01 : size()
+Class01 : int chimp
+Class01 : int gorilla
+Class08 <--> C2: Cool label
+```
+
+Class diagram is powered by [mermaid](https://github.com/knsv/mermaid).
+
+::: warning
+Adding many class diagrams will slow down the editor.
+:::
+
 
 ## Custom Container
 

package.json

@@ -41,6 +41,7 @@
   "devDependencies": {
     "babel-core": "^6.24.1",
     "babel-loader": "^7.0.0",
+    "babel-plugin-transform-remove-strict-mode": "^0.0.2",
     "babel-preset-env": "^1.5.1",
     "css-loader": "^0.28.4",
     "extract-text-webpack-plugin": "^2.1.0",

webpack.config.js

@@ -23,6 +23,9 @@ const rules = [
               }
             }
           ]
+        ],
+        plugins: [
+          'transform-remove-strict-mode' // in order to make mermaid work
         ]
       }
     }
@@ -34,6 +37,7 @@ const config = {
   entry: {
     'index': './src/index.js'
   },
+  externals: 'fs', // in order to make mermaid work
   output: {
     path: path.join(__dirname, './dist/'),
     filename: '[name].bundle.js'

yarn.lock

@@ -562,6 +562,10 @@ babel-plugin-transform-regenerator@^6.22.0:
   dependencies:
     regenerator-transform "0.9.11"
 
+babel-plugin-transform-remove-strict-mode@^0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-remove-strict-mode/-/babel-plugin-transform-remove-strict-mode-0.0.2.tgz#913685aab95439f3a0ed88e588fbd5e997890579"
+
 babel-plugin-transform-strict-mode@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.24.1.tgz#d5faf7aa578a65bbe591cf5edae04a0c67020758"