fixed class diagram hopefuly no conflict

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "typescript.format.enable": false,
+  "typescript.reportStyleChecksAsWarnings": false,
+  "typescript.validate.enable": false,
+  "javascript.validate.enable": false,
+  "editor.formatOnSave": false
+}

CHANGELOG.md

@@ -22,6 +22,8 @@
 
 **Merged pull requests:**
 
+- Adding weekend ignore do Gantt [\$314] (https://github.com/knsv/mermaid/issues/314)
+
 - Adding init argument to the global API [\#137](https://github.com/knsv/mermaid/pull/137) ([bollwyvl](https://github.com/bollwyvl))
 
 - Add description of manual calling of init [\#136](https://github.com/knsv/mermaid/pull/136) ([bollwyvl](https://github.com/bollwyvl))

README.md

@@ -12,6 +12,23 @@ Ever wanted to simplify documentation and avoid heavy tools like Visio when expl
 
 This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript.
 
+**Mermaid was nomiated and won the JS Open Source Awards (2019) in the catory The most existing use of technology!!! Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintin the project.**
+
+### Are you someone who wants to take an active role in improving mermaid?
+
+Look at the list of areas we need help with:
+
+* Development - help solving issues
+* Development - work with the build environment, with JS we keep updating the tools we use
+* Development - new diagram types
+* Development - Handling Pull Requests
+* Test - testing in connection with realeases, regression testing 
+* Test - verification of fixed issues
+* Test - test of pull requests and verification testing
+* Release management - more of a PL role, make roadmap for the project, coordinating the work 
+* Release management - classification and monitoring of incoming issues 
+
+If you think lending a hand to one or more of these areas would be fun, please send an email tp [email protected]!
 
 ### Flowchart
 
@@ -49,6 +66,7 @@ sequenceDiagram
 gantt
 dateFormat  YYYY-MM-DD
 title Adding GANTT diagram to mermaid
+excludes weekdays 2014-01-10
 
 section A section
 Completed task            :done,    des1, 2014-01-06,2014-01-08
@@ -147,7 +165,7 @@ As part of this team you would get write access to the repository and would
 represent the project when answering questions and issues.
 
 Together we could continue the work with things like:
-* adding more typers of diagrams like mindmaps, ert digrams etc
+* adding more types of diagrams like mindmaps, ert diagrams etc
 * improving existing diagrams
 
 Don't hesitate to contact me if you want to get involved.

__mocks__/MERMAID.js

@@ -0,0 +1,3 @@
+export const curveBasis = 'basis'
+export const curveLinear = 'linear'
+export const curveCardinal = 'cardinal'

babel.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current'
+        }
+      }
+    ]
+  ]
+}

dist/index.html

@@ -206,6 +206,35 @@
 		a1-->a2
 	end
   </div>
+  <div class="mermaid">
+  graph TB
+  A
+  B
+  subgraph foo[Foo SubGraph]
+    C
+    D
+  end
+  subgraph bar[Bar SubGraph]
+    E
+    F
+  end
+  G
+
+  A-->B
+  B-->C
+  C-->D
+  B-->D
+  D-->E
+  E-->A
+  E-->F
+  F-->D
+  F-->G
+  B-->G
+  G-->D
+
+  style foo fill:#F99,stroke-width:2px,stroke:#F0F
+  style bar fill:#999,stroke-width:10px,stroke:#0F0
+  </div>
   <div class="mermaid">
       graph LR
       456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
@@ -268,6 +297,7 @@
 dateFormat  YYYY-MM-DD
 axisFormat  %d/%m
 title Adding GANTT diagram to mermaid
+excludes weekdays 2014-01-10
 
 section A section
 Completed task            :done,    des1, 2014-01-06,2014-01-08
@@ -288,6 +318,13 @@
 Add gantt diagram to demo page      :after a1  , 20h
 Add another diagram to demo page    :doc1, after a1  , 48h
 
+section Clickable
+Visit mermaidjs               :active, cl1, 2014-01-07,2014-01-10
+Calling a Callback (look at the console log) :cl2, after cl1, 3d
+
+click cl1 href "https://mermaidjs.github.io/"
+click cl2 call ganttTestClick("test", test, test)
+
 section Last section
 Describe gantt syntax               :after doc1, 3d
 Add gantt diagram to demo page      : 20h
@@ -320,11 +357,11 @@
   <div class="mermaid">
 classDiagram
 Class01 <|-- AveryLongClass : Cool
-Class03 *-- Class04
-Class05 o-- Class06
+Class03 "0" *-- "0..n" Class04
+Class05 "1" o-- "many" Class06
 Class07 .. Class08
-Class09 --> C2 : Where am i?
-Class09 --* C3
+Class09 "many" --> "1" C2  : Where am i?
+Class09 "0" --* "1..n" C3
 Class09 --|> Class07
 Class07 : equals()
 Class07 : Object[] elementData
@@ -346,6 +383,11 @@
     });
   </script>
   <script>
+    function ganttTestClick(a, b, c){
+      console.log("a:", a)
+      console.log("b:", b)
+      console.log("c:", c)
+    }
     function testClick(nodeId) {
       console.log("clicked", nodeId)
       var originalBgColor = document.querySelector('body').style.backgroundColor

e2e/README.md

@@ -0,0 +1,9 @@
+# End to end tests
+
+These tests are end to end tests in the sense that they actually render a full diagram in the browser. The purpose of these tests is to simplify handling of merge requests and releases by highlighting possible unexpected side-effects.
+
+Apart from beeing rendered in a browser the tests perform image snapshots of the diagrams. The tests is handled in the same way as regular jest snapshots tests with the difference that an image comparison is performed instead of a comparison of the generated code.
+
+## To run the tests
+1. Start the dev server by running **yarn dev**
+2. Run yarn e2e to run the tests

e2e/helpers/util.js

@@ -0,0 +1,26 @@
+/* eslint-env jest */
+import { Base64 } from 'js-base64'
+
+export const mermaidUrl = (graphStr, options) => {
+  const obj = {
+    code: graphStr,
+    mermaid: options
+  }
+  const objStr = JSON.stringify(obj)
+  // console.log(Base64)
+  return 'http://localhost:9000/e2e.html?graph=' + Base64.encodeURI(objStr)
+}
+
+export const imgSnapshotTest = async (page, graphStr, options) => {
+  return new Promise(async resolve => {
+    const url = mermaidUrl(graphStr, options)
+
+    await page.goto(url)
+
+    const image = await page.screenshot()
+
+    expect(image).toMatchImageSnapshot()
+    resolve()
+  })
+  // page.close()
+}

e2e/jest.config.js

@@ -0,0 +1,11 @@
+// jest.config.js
+module.exports = {
+  // verbose: true,
+  transform: {
+    '^.+\\.jsx?$': '../transformer.js'
+  },
+  preset: 'jest-puppeteer',
+  'globalSetup': 'jest-environment-puppeteer/setup',
+  'globalTeardown': 'jest-environment-puppeteer/teardown',
+  'testEnvironment': 'jest-environment-puppeteer'
+}

e2e/platform/bundle-test.js

@@ -0,0 +1,10 @@
+import mermaid from '../../dist/mermaid.core'
+
+mermaid.initialize({
+  theme: 'forest',
+  gantt: { axisFormatter: [
+    ['%Y-%m-%d', (d) => {
+      return d.getDay() === 1
+    }]
+  ] }
+})

e2e/platform/e2e.html

@@ -0,0 +1,19 @@
+<html>
+  <head>
+    <script src="/e2e.js"></script>
+    <link
+      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+    />
+    <style></style>
+  </head>
+  <body>
+    <script src="./mermaid.js"></script>
+    <script>
+      mermaid.initialize({
+        startOnLoad: false,
+        useMaxWidth: true,
+      });
+    </script>
+  </body>
+</html>

e2e/platform/viewer.js

@@ -0,0 +1,37 @@
+import { Base64 } from 'js-base64'
+
+/**
+ * ##contentLoaded
+ * Callback function that is called when page is loaded. This functions fetches configuration for mermaid rendering and
+ * calls init for rendering the mermaid diagrams on the page.
+ */
+const contentLoaded = function () {
+  let pos = document.location.href.indexOf('?graph=')
+  if (pos > 0) {
+    pos = pos + 7
+    const graphBase64 = document.location.href.substr(pos)
+    const graphObj = JSON.parse(Base64.decode(graphBase64))
+    // const graph = 'hello'
+    console.log(graphObj)
+    const div = document.createElement('div')
+    div.id = 'block'
+    div.className = 'mermaid'
+    div.innerHTML = graphObj.code
+    document.getElementsByTagName('body')[0].appendChild(div)
+    global.mermaid.initialize(graphObj.mermaid)
+    global.mermaid.init()
+  }
+}
+
+if (typeof document !== 'undefined') {
+  /*!
+   * Wait for document loaded before starting the execution
+   */
+  window.addEventListener(
+    'load',
+    function () {
+      contentLoaded()
+    },
+    false
+  )
+}

e2e/platform/webpackUsage.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+
+<body>
+  <div class="mermaid">
+graph LR
+A-->B
+  </div>
+  <div class="mermaid">
+gantt
+title A Gantt Diagram
+dateFormat  YYYY-MM-DD
+section Section
+A task           :a1, 2014-01-01, 30d
+Another task     :after a1  , 20d
+section Another
+Task in sec      :2014-01-12  , 12d
+another task      : 24d
+  </div>
+  <script src="./bundle-test.js" charset="utf-8"></script>
+</body>
+
+</html>

e2e/spec/classDiagram.spec.js

@@ -0,0 +1,27 @@
+/* eslint-env jest */
+import { imgSnapshotTest } from '../helpers/util.js'
+const { toMatchImageSnapshot } = require('jest-image-snapshot')
+
+expect.extend({ toMatchImageSnapshot })
+
+describe('Sequencediagram', () => {
+  it('should render a simple class diagrams', async () => {
+    await imgSnapshotTest(page, `
+    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
+      `,
+    {})
+  })
+})