diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index e5ca57991..a8bafc91a 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -20,26 +20,32 @@ jobs: steps: - uses: actions/checkout@v3 + - uses: pnpm/action-setup@v2 + # uses version from "packageManager" field in package.json + - name: Setup Node.js ${{ matrix.node-version }} uses: actions/setup-node@v3 with: - cache: yarn + cache: pnpm node-version: ${{ matrix.node-version }} - - name: Install Yarn - run: npm i yarn --global - - name: Install Packages run: | - yarn install --frozen-lockfile + pnpm install --frozen-lockfile env: CYPRESS_CACHE_FOLDER: .cache/Cypress - name: Run Build - run: yarn build + run: pnpm run build - - name: Upload Build as Artifact + - name: Upload Mermaid Build as Artifact uses: actions/upload-artifact@v3 with: - name: dist - path: dist + name: mermaid-build + path: packages/mermaid/dist + + - name: Upload Mermaid Mindmap Build as Artifact + uses: actions/upload-artifact@v3 + with: + name: mermaid-mindmap-build + path: packages/mermaid-mindmap/dist diff --git a/.github/workflows/e2e-applitools.yml b/.github/workflows/e2e-applitools.yml index b0319b072..5c515b433 100644 --- a/.github/workflows/e2e-applitools.yml +++ b/.github/workflows/e2e-applitools.yml @@ -29,25 +29,24 @@ jobs: name: Warn if not using Applitools run: | echo "::error,title=Not using Applitols::APPLITOOLS_API_KEY is empty, disabling Applitools for this run." + - uses: actions/checkout@v3 + + - uses: pnpm/action-setup@v2 + # uses version from "packageManager" field in package.json + - name: Setup Node.js ${{ matrix.node-version }} uses: actions/setup-node@v3 with: - cache: yarn + cache: pnpm node-version: ${{ matrix.node-version }} - - name: Install Yarn - run: npm i yarn --global - - name: Install Packages run: | - yarn install --frozen-lockfile + pnpm install --frozen-lockfile env: CYPRESS_CACHE_FOLDER: .cache/Cypress - - name: Run Build - run: yarn build - - if: ${{ env.USE_APPLI }} name: Notify applitools of new batch # Copied from docs https://applitools.com/docs/topics/integrations/github-integration-ci-setup.html @@ -60,7 +59,7 @@ jobs: APPLITOOLS_SERVER_URL: 'https://eyesapi.applitools.com' - name: Run E2E Tests - run: yarn e2e + run: pnpm run e2e env: CYPRESS_CACHE_FOLDER: .cache/Cypress # Mermaid applitools.config.js uses this to pick batch name. diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml index 194f87054..8925a828d 100644 --- a/.github/workflows/e2e.yml +++ b/.github/workflows/e2e.yml @@ -16,32 +16,31 @@ jobs: steps: - uses: actions/checkout@v3 - - uses: actions/cache@v3 - id: yarn-and-build-cache - with: - path: | - ~/.cache/Cypress - build - node_modules - key: ${{ runner.os }}-node_modules-build-${{ hashFiles('**/yarn.lock') }} - restore-keys: | - ${{ runner.os }}-node_modules-build- + - uses: pnpm/action-setup@v2 + # uses version from "packageManager" field in package.json - name: Setup Node.js ${{ matrix.node-version }} uses: actions/setup-node@v3 + # Need to skip setup if Cypress run is skipped, otherwise an error + # is thrown since the pnpm cache step fails + if: ${{ ( env.CYPRESS_RECORD_KEY != '' ) || ( matrix.containers == 1 ) }} with: - cache: yarn + cache: pnpm node-version: ${{ matrix.node-version }} # Install NPM dependencies, cache them correctly # and run all Cypress tests - name: Cypress run - uses: cypress-io/github-action@v3 + uses: cypress-io/github-action@v4 + # If CYPRESS_RECORD_KEY is set, run in parallel on all containers + # Otherwise (e.g. if running from fork), we run on a single container only + if: ${{ ( env.CYPRESS_RECORD_KEY != '' ) || ( matrix.containers == 1 ) }} with: - start: yarn dev + start: pnpm run dev wait-on: 'http://localhost:9000' - record: true - headless: true - parallel: true + # Disable recording if we don't have an API key + # e.g. if this action was run from a fork + record: ${{ secrets.CYPRESS_RECORD_KEY != '' }} + parallel: ${{ secrets.CYPRESS_RECORD_KEY != '' }} env: CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }} diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index c84632264..aa80e5c6e 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -30,23 +30,23 @@ jobs: with: fetch-depth: 2 + - uses: pnpm/action-setup@v2 + # uses version from "packageManager" field in package.json + - name: Setup Node.js ${{ matrix.node-version }} uses: actions/setup-node@v3 with: - cache: yarn + cache: pnpm node-version: ${{ matrix.node-version }} - - name: Install Yarn - run: npm i yarn --global - - name: Install Packages run: | - yarn install --frozen-lockfile + pnpm install --frozen-lockfile env: CYPRESS_CACHE_FOLDER: .cache/Cypress - name: Run Linting - run: yarn lint + run: pnpm run lint - name: Run changed-files using the fork point of a pull request id: changed-files-fork-point @@ -71,4 +71,4 @@ jobs: add: 'docs/*' - name: Verify Docs - run: yarn docs:verify + run: pnpm run docs:verify diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 08c35befa..fd058406d 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -14,24 +14,24 @@ jobs: steps: - uses: actions/checkout@v3 + - uses: pnpm/action-setup@v2 + # uses version from "packageManager" field in package.json + - name: Setup Node.js ${{ matrix.node-version }} uses: actions/setup-node@v3 with: - cache: yarn + cache: pnpm node-version: ${{ matrix.node-version }} - - name: Install Yarn - run: npm i yarn --global - - name: Install Packages run: | - yarn install --frozen-lockfile + pnpm install --frozen-lockfile env: CYPRESS_CACHE_FOLDER: .cache/Cypress - name: Run Unit Tests run: | - yarn ci --coverage + pnpm run ci --coverage - name: Upload Coverage to Coveralls # it feels a bit weird to use @master, but that's what the docs use diff --git a/.husky/pre-commit b/.husky/pre-commit index 025779ed2..a9e30b9be 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,4 +1,4 @@ #!/bin/sh . "$(dirname "$0")/_/husky.sh" -yarn pre-commit +pnpm run pre-commit diff --git a/.lintstagedrc.json b/.lintstagedrc.json index 1e7c61dd8..be6e92770 100644 --- a/.lintstagedrc.json +++ b/.lintstagedrc.json @@ -1,6 +1,6 @@ { - "src/docs/**": ["yarn docs:build --git"], - "src/docs.mts": ["yarn docs:build --git"], + "packages/mermaid/src/docs/**": ["pnpm run docs:build --git"], + "packages/mermaid/src/docs.mts": ["pnpm run docs:build --git"], "*.{ts,js,json,html,md,mts}": ["eslint --fix", "prettier --write"], - "*.jison": ["yarn lint:jison"] + "*.jison": ["pnpm run lint:jison"] } diff --git a/.prettierignore b/.prettierignore index 877e20f81..fe2c55574 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,4 +1,6 @@ dist cypress/platform/xss3.html .cache -coverage \ No newline at end of file +coverage +# Autogenerated by PNPM +pnpm-lock.yaml \ No newline at end of file diff --git a/.vite/build.ts b/.vite/build.ts index c4df49ea2..6855d3e48 100644 --- a/.vite/build.ts +++ b/.vite/build.ts @@ -3,35 +3,67 @@ import { resolve } from 'path'; import { fileURLToPath } from 'url'; import jisonPlugin from './jisonPlugin.js'; import pkg from '../package.json' assert { type: 'json' }; -type OutputOptions = Exclude< - Exclude['rollupOptions'], - undefined ->['output']; const { dependencies } = pkg; const watch = process.argv.includes('--watch'); const __dirname = fileURLToPath(new URL('.', import.meta.url)); +type OutputOptions = Exclude< + Exclude['rollupOptions'], + undefined +>['output']; + +const packageOptions = { + mermaid: { + name: 'mermaid', + packageName: 'mermaid', + file: 'mermaid.ts', + }, + 'mermaid-mindmap': { + name: 'mermaid-mindmap', + packageName: 'mermaid-mindmap', + file: 'add-diagram.ts', + }, + 'mermaid-mindmap-detector': { + name: 'mermaid-mindmap-detector', + packageName: 'mermaid-mindmap', + file: 'registry.ts', + }, + 'mermaid-example-diagram': { + name: 'mermaid-example-diagram', + packageName: 'mermaid-example-diagram', + file: 'add-diagram.ts', + }, + 'mermaid-example-diagram-detector': { + name: 'mermaid-example-diagram-detector', + packageName: 'mermaid-example-diagram', + file: 'registry.ts', + }, +}; + interface BuildOptions { minify: boolean | 'esbuild'; core?: boolean; watch?: boolean; + entryName: keyof typeof packageOptions; } -export const getBuildConfig = ({ minify, core, watch }: BuildOptions): InlineConfig => { +export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions): InlineConfig => { const external = ['require', 'fs', 'path']; + console.log(entryName, packageOptions[entryName]); + const { name, file, packageName } = packageOptions[entryName]; let output: OutputOptions = [ { - name: 'mermaid', + name, format: 'esm', sourcemap: true, - entryFileNames: `[name].esm${minify ? '.min' : ''}.mjs`, + entryFileNames: `${name}.esm${minify ? '.min' : ''}.mjs`, }, { - name: 'mermaid', + name, format: 'umd', sourcemap: true, - entryFileNames: `[name]${minify ? '.min' : ''}.js`, + entryFileNames: `${name}${minify ? '.min' : ''}.js`, }, ]; @@ -42,9 +74,10 @@ export const getBuildConfig = ({ minify, core, watch }: BuildOptions): InlineCon // This needs to be an array. Otherwise vite will build esm & umd with same name and overwrite esm with umd. output = [ { + name, format: 'esm', sourcemap: true, - entryFileNames: `[name].core.mjs`, + entryFileNames: `${name}.core.mjs`, }, ]; } @@ -53,11 +86,12 @@ export const getBuildConfig = ({ minify, core, watch }: BuildOptions): InlineCon configFile: false, build: { emptyOutDir: false, + outDir: resolve(__dirname, `../packages/${packageName}/dist`), lib: { - entry: resolve(__dirname, '../src/mermaid.ts'), - name: 'mermaid', + entry: resolve(__dirname, `../packages/${packageName}/src/${file}`), + name, // the proper extensions will be added - fileName: 'mermaid', + fileName: name, }, minify, rollupOptions: { @@ -73,17 +107,36 @@ export const getBuildConfig = ({ minify, core, watch }: BuildOptions): InlineCon if (watch && config.build) { config.build.watch = { - include: 'src/**', + include: [ + 'packages/mermaid-mindmap/src/**', + 'packages/mermaid/src/**', + 'packages/mermaid-example-diagram/src/**', + ], }; } return config; }; +const buildPackage = async (entryName: keyof typeof packageOptions) => { + return Promise.allSettled([ + build(getBuildConfig({ minify: false, entryName })), + build(getBuildConfig({ minify: 'esbuild', entryName })), + build(getBuildConfig({ minify: false, core: true, entryName })), + ]); +}; + +const main = async () => { + const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[]; + for (const pkg of packageNames) { + await buildPackage(pkg); + } +}; + if (watch) { - build(getBuildConfig({ minify: false, watch })); + build(getBuildConfig({ minify: false, watch, entryName: 'mermaid' })); + build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' })); + build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' })); } else { - build(getBuildConfig({ minify: false })); - build(getBuildConfig({ minify: 'esbuild' })); - build(getBuildConfig({ minify: false, core: true })); + void main(); } diff --git a/.vite/server.ts b/.vite/server.ts index 4cadc07cb..3cfea7cf4 100644 --- a/.vite/server.ts +++ b/.vite/server.ts @@ -13,7 +13,7 @@ async function createServer() { }); app.use(vite.middlewares); - app.use(express.static('dist')); + app.use(express.static('./packages/mermaid/dist')); app.use(express.static('demos')); app.use(express.static('cypress/platform')); diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 8171aeca9..d7efa8e41 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -11,8 +11,8 @@ Here are a few things to know to get you started on the right path. ```bash git clone git@github.com:mermaid-js/mermaid.git cd mermaid -yarn -yarn test +pnpm install +pnpm test ``` ## Committing code @@ -103,7 +103,7 @@ This is important so that, if someone else does a change to the grammar that doe This tests the rendering and visual appearance of the diagram. This ensures that the rendering of that feature in the e2e will be reviewed in the release process going forward. Less chance that it breaks! -To start working with the e2e tests, run `yarn dev` to start the dev server, after that start cypress by running `cypress open` in the mermaid folder. (Make sure you have path to cypress in order, the binary is located in node_modules/.bin). +To start working with the e2e tests, run `pnpm run dev` to start the dev server, after that start cypress by running `pnpm exec cypress open` in the mermaid folder. The rendering tests are very straightforward to create. There is a function imgSnapshotTest. This function takes a diagram in text form, the mermaid options and renders that diagram in cypress. diff --git a/README.md b/README.md index f42bf348d..b30d8d438 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,22 @@ # mermaid [![Build Status](https://travis-ci.org/mermaid-js/mermaid.svg?branch=master)](https://travis-ci.org/mermaid-js/mermaid) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) +# Whoa, whats going on here? + +We are transforming the Mermaid repository to a so called mono-repo. This is a part of the effort to decouple the diagrams from the core of mermaid. This will: + +- Make it possible to select which diagrams to include on your site +- Open up for lazy loading +- Make it possible to add diagrams from outside of the Mermaid repository +- Separate the release flow between different diagrams and the Mermaid core + +As such be aware of some changes.. + +# We use pnpm now + +# The source code has moved + +It is now located in the src folder for each respective package located as subfolders in packages. + English | [简体中文](./README.zh-CN.md) diff --git a/cypress/platform/bundle-test.js b/cypress/platform/bundle-test.js index 074dd8c63..a991918c4 100644 --- a/cypress/platform/bundle-test.js +++ b/cypress/platform/bundle-test.js @@ -1,4 +1,4 @@ -import mermaid from '../../src/mermaid'; +import mermaid from '../../packages/mermaid/src/mermaid'; let code = `flowchart LR Power_Supply --> Transmitter_A diff --git a/cypress/platform/e2e.html b/cypress/platform/e2e.html index c686afc88..99f70d7c1 100644 --- a/cypress/platform/e2e.html +++ b/cypress/platform/e2e.html @@ -2,7 +2,7 @@ - - 
-flowchart LR
-  a ---
-    
 flowchart LR
-  a2 ---
+  subgraph one
+    direction LR
+    A[myClass1] --> B[default]
+    subgraph two
+      direction BT
+      C[myClass2] --> D[default]
+    end
+  end
+
     
 flowchart LR
@@ -79,7 +83,7 @@ flowchart TD
     end
     end
- 
+    
 flowchart TD
 
   release-branch[Create Release Branch]:::relClass
@@ -131,7 +135,7 @@ flowchart TD
       class A someclass;
       class C someclass;
     

-    
+    
    sequenceDiagram
       title: My Sequence Diagram Title
       accTitle: My Acc Sequence Diagram
@@ -141,14 +145,14 @@ flowchart TD
       John-->>Alice: Great!
       Alice-)John: See you later!
     

-    
+    
 graph TD
     A -->|000| B
     B -->|111| C
 
     linkStyle 1 stroke:#ff3,stroke-width:4px,color:red;
     

-    
+    
   journey
       accTitle: My User Journey Diagram
       accDescr: My User Journey Diagram Description
@@ -162,10 +166,10 @@ graph TD
         Go downstairs: 5: Me
         Sit down: 5: Me
     

-    
+    
         info
     

-    
+    
 requirementDiagram
       accTitle: My req Diagram
       accDescr: My req Diagram Description
@@ -206,7 +210,7 @@ requirementDiagram
     test_req - contains -> test_req3
     test_req <- copies - test_entity2
     

-    
+    
 gantt
     dateFormat  YYYY-MM-DD
     title       Adding GANTT diagram functionality to mermaid
@@ -238,7 +242,7 @@ gantt
     Add gantt diagram to demo page      :20h
     Add another diagram to demo page    :48h
     

-    
+    
 stateDiagram
   state Active {
     Idle
@@ -266,7 +270,7 @@ stateDiagram
           end
           B ->> A: Return
     

-    
+    
 classDiagram
 accTitle: My class diagram
 accDescr: My class diagram Description
@@ -291,7 +295,7 @@ class Class10 {
         A->>Bob: Hola
         Bob-->A: Pasten !
     

-    
+    
       gitGraph
        commit id: "ZERO"
        branch develop
@@ -320,7 +324,7 @@ flowchart TD
       C -->|Two| E[iPhone]
       C -->|Three| F[fa:fa-car Car]
     

-    
+    
         classDiagram
           Animal "1" <|-- Duck
           Animal <|-- Fish
@@ -343,7 +347,7 @@ flowchart TD
             +run()
           }
     

-    
+    
         erDiagram
     CAR ||--o{ NAMED-DRIVER : allows
     CAR {
@@ -359,7 +363,9 @@ flowchart TD
     }
     

 
-    
+    
+    
+    
     
+    
+info
+        

+    
+            mindmap
+          root
+            ch1
+            ch2
+        

+    
+    
+    
     
   
 
diff --git a/cypress/platform/per.html b/cypress/platform/per.html
new file mode 100644
index 000000000..4fca4c808
--- /dev/null
+++ b/cypress/platform/per.html
@@ -0,0 +1,82 @@
+
+  
+    
+    
+    
+    
+    
+  
+  
+    
Security check

+    
+flowchart LR
+A-->B
+        

+    
+            mindmap
+          root
+            ch1
+            ch2
+        

+    
+    
+    
+    
+  
+
diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js
index 53ba75d74..8f1ccfdab 100644
--- a/cypress/platform/viewer.js
+++ b/cypress/platform/viewer.js
@@ -1,4 +1,4 @@
-import mermaid2 from '../../src/mermaid';
+import mermaid2 from '../../packages/mermaid/src/mermaid';
 
 function b64ToUtf8(str) {
   return decodeURIComponent(escape(window.atob(str)));
diff --git a/demos/c4context.html b/demos/c4context.html
new file mode 100644
index 000000000..1485d42d8
--- /dev/null
+++ b/demos/c4context.html
@@ -0,0 +1,299 @@
+
+
+  
+    
+    
+    C4 Mermaid Quick Test Page
+    
+    
+  
+
+  
+    
+    C4Context
+      accTitle: C4 context demo
+      accDescr: Many large C4 diagrams
+
+      title System Context diagram for Internet Banking System
+
+      Enterprise_Boundary(b0, "BankBoundary0") {
+          Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
+          Person(customerB, "Banking Customer B")
+          Person_Ext(customerC, "Banking Customer C", "desc")
+
+          Person(customerD, "Banking Customer D", "A customer of the bank, 
 with personal bank accounts.")
+
+          System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
+
+          Enterprise_Boundary(b1, "BankBoundary") {
+
+            SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+            System_Boundary(b2, "BankBoundary2") {
+              System(SystemA, "Banking System A")
+              System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
+            }
+
+            System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
+            SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
+
+            Boundary(b3, "BankBoundary3", "boundary") {
+              SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
+              SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
+            }
+          }
+        }
+      
+      BiRel(customerA, SystemAA, "Uses")
+      BiRel(SystemAA, SystemE, "Uses")
+      Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
+      Rel(SystemC, customerA, "Sends e-mails to")
+
+      UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
+      UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
+      UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
+      UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
+      UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
+      
+      UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
+    

+
+    
+    C4Container
+    title Container diagram for Internet Banking System
+
+    System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", $tags="v1.0")
+    Person(customer, Customer, "A customer of the bank, with personal bank accounts", $tags="v1.0")
+
+    Container_Boundary(c1, "Internet Banking") {
+        Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser")
+        Container_Ext(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
+        Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
+        ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")
+        ContainerDb_Ext(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API")
+
+    }
+
+    System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+    Rel(customer, web_app, "Uses", "HTTPS")
+    UpdateRelStyle(customer, web_app, $offsetY="60", $offsetX="90")     
+    Rel(customer, spa, "Uses", "HTTPS")
+    UpdateRelStyle(customer, spa, $offsetY="-40")    
+    Rel(customer, mobile_app, "Uses")
+    UpdateRelStyle(customer, mobile_app, $offsetY="-30") 
+
+    Rel(web_app, spa, "Delivers")
+    UpdateRelStyle(web_app, spa, $offsetX="130") 
+    Rel(spa, backend_api, "Uses", "async, JSON/HTTPS")
+    Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS")
+    Rel_Back(database, backend_api, "Reads from and writes to", "sync, JDBC")
+
+    Rel(email_system, customer, "Sends e-mails to")
+    UpdateRelStyle(email_system, customer, $offsetX="-45")    
+    Rel(backend_api, email_system, "Sends e-mails using", "sync, SMTP")
+    UpdateRelStyle(backend_api, email_system, $offsetY="-60")    
+    Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
+    UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")
+    

+
+    
+    C4Component
+    title Component diagram for Internet Banking System - API Application
+
+    Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
+    Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.")
+    ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
+    System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+    Container_Boundary(api, "API Application") {
+        Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")
+        Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts")
+        Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.")
+        Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.")
+
+        Rel(sign, security, "Uses")
+        Rel(accounts, mbsfacade, "Uses")
+        Rel(security, db, "Read & write to", "JDBC")
+        Rel(mbsfacade, mbs, "Uses", "XML/HTTPS")
+    }
+
+    Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
+    Rel(spa, accounts, "Uses", "JSON/HTTPS")
+
+    Rel(ma, sign, "Uses", "JSON/HTTPS")
+    Rel(ma, accounts, "Uses", "JSON/HTTPS")
+
+    UpdateRelStyle(spa, sign, $offsetY="-40") 
+    UpdateRelStyle(spa, accounts, $offsetX="40", $offsetY="40")
+
+    UpdateRelStyle(ma, sign, $offsetX="-90", $offsetY="40")
+    UpdateRelStyle(ma, accounts, $offsetY="-40")
+
+        UpdateRelStyle(sign, security, $offsetX="-160", $offsetY="10")
+        UpdateRelStyle(accounts, mbsfacade, $offsetX="140", $offsetY="10")
+        UpdateRelStyle(security, db, $offsetY="-40")
+        UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
+    

+
+    
+    C4Dynamic
+    title Dynamic diagram for Internet Banking System - API Application
+
+    ContainerDb(c4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
+    Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
+    Container_Boundary(b, "API Application") {
+      Component(c3, "Security Component", "Spring Bean", "Provides functionality Related to signing in, changing passwords, etc.")
+      Component(c2, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
+    }
+    Rel(c1, c2, "Submits credentials to", "JSON/HTTPS")
+    Rel(c2, c3, "Calls isAuthenticated() on")
+    Rel(c3, c4, "select * from users where username = ?", "JDBC")
+
+    UpdateRelStyle(c1, c2, $textColor="red", $offsetY="-40")
+    UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
+    UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
+    

+
+    
+    C4Deployment
+    title Deployment Diagram for Internet Banking System - Live
+
+    Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){
+        Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
+    }
+
+    Deployment_Node(comp, "Customer's computer", "Mircosoft Windows or Apple macOS"){
+        Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,
 Apple Safari or Microsoft Edge"){
+            Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
+        }
+    }
+
+    Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){
+        Deployment_Node(dn, "bigbank-api*** x8", "Ubuntu 16.04 LTS"){
+            Deployment_Node(apache, "Apache Tomcat", "Apache Tomcat 8.x"){
+                Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.")
+            }
+        }
+        Deployment_Node(bb2, "bigbank-web*** x4", "Ubuntu 16.04 LTS"){
+            Deployment_Node(apache2, "Apache Tomcat", "Apache Tomcat 8.x"){
+                Container(web, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet Banking single page application.")
+            }
+        }
+        Deployment_Node(bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS"){
+            Deployment_Node(oracle, "Oracle - Primary", "Oracle 12c"){
+                ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
+            }
+        }
+        Deployment_Node(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS") {
+            Deployment_Node(oracle2, "Oracle - Secondary", "Oracle 12c") {
+                ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
+            }
+        }
+    }
+
+    Rel(mobile, api, "Makes API calls to", "json/HTTPS")
+    Rel(spa, api, "Makes API calls to", "json/HTTPS")
+    Rel_U(web, spa, "Delivers to the customer's web browser")
+    Rel(api, db, "Reads from and writes to", "JDBC")
+    Rel(api, db2, "Reads from and writes to", "JDBC")
+    Rel_R(db, db2, "Replicates data to")
+
+    UpdateRelStyle(spa, api, $offsetY="-40")
+    UpdateRelStyle(web, spa, $offsetY="-40")
+    UpdateRelStyle(api, db, $offsetY="-20", $offsetX="5")
+    UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20")
+    UpdateRelStyle(db, db2, $offsetY="-10")
+     

+
+    

+
+    
+    
+    
+    
+  
+
diff --git a/demos/classchart.html b/demos/classchart.html
index ebc3fe0a5..e15495b95 100644
--- a/demos/classchart.html
+++ b/demos/classchart.html
@@ -3,7 +3,7 @@
   
     
     
-    Mermaid Quick Test Page
+    Class diagrams Mermaid Quick Test Page
     
     
+  
+
+  
+    
+    gitGraph:
+    options
+    {
+    "nodeSpacing": 50,
+    "nodeRadius": 5
+    }
+    end
+    branch master
+    commit
+    branch newbranch
+    checkout newbranch
+    commit
+    commit
+    checkout master
+    commit
+    commit
+    merge newbranch
+    

+
+    
+    
+  
+
diff --git a/demos/index.html b/demos/index.html
index 8ef343ef1..f0ddb6ac3 100644
--- a/demos/index.html
+++ b/demos/index.html
@@ -14,999 +14,43 @@
   
 
   
-    
-    info
-    

-
-    

-
-    
-    C4Context
-      title System Context diagram for Internet Banking System
-Enterprise_Boundary(b0, "BankBoundary0") {
-      Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
-      Person(customerB, "Banking Customer B")      
-      Person_Ext(customerC, "Banking Customer C", "desc")            
-
-      Person(customerD, "Banking Customer D", "A customer of the bank, 
 with personal bank accounts.")
-
-      System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")  
-
-      Enterprise_Boundary(b1, "BankBoundary") {
-       
-        SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")      
-
-        System_Boundary(b2, "BankBoundary2") {  
-          System(SystemA, "Banking System A")  
-          System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")        
-        } 
-
-        System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.") 
-        SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.") 
-
-        Boundary(b3, "BankBoundary3", "boundary") {  
-          SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")        
-          SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.") 
-        }
-      }
-    }
-      
-      BiRel(customerA, SystemAA, "Uses")
-      BiRel(SystemAA, SystemE, "Uses")
-      Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
-      Rel(SystemC, customerA, "Sends e-mails to")
-
-      UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
-      UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
-      UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
-      UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
-      UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
-      
-      UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
-    

-
-    
-    C4Container
-    title Container diagram for Internet Banking System
-
-    System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", $tags="v1.0")
-    Person(customer, Customer, "A customer of the bank, with personal bank accounts", $tags="v1.0")
-
-    Container_Boundary(c1, "Internet Banking") {
-        Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser")
-        Container_Ext(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
-        Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
-        ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")
-        ContainerDb_Ext(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API")
-
-    }
-
-    System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
-
-    Rel(customer, web_app, "Uses", "HTTPS")
-    UpdateRelStyle(customer, web_app, $offsetY="60", $offsetX="90")     
-    Rel(customer, spa, "Uses", "HTTPS")
-    UpdateRelStyle(customer, spa, $offsetY="-40")    
-    Rel(customer, mobile_app, "Uses")
-    UpdateRelStyle(customer, mobile_app, $offsetY="-30") 
-
-    Rel(web_app, spa, "Delivers")
-    UpdateRelStyle(web_app, spa, $offsetX="130") 
-    Rel(spa, backend_api, "Uses", "async, JSON/HTTPS")
-    Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS")
-    Rel_Back(database, backend_api, "Reads from and writes to", "sync, JDBC")
-
-    Rel(email_system, customer, "Sends e-mails to")
-    UpdateRelStyle(email_system, customer, $offsetX="-45")    
-    Rel(backend_api, email_system, "Sends e-mails using", "sync, SMTP")
-    UpdateRelStyle(backend_api, email_system, $offsetY="-60")    
-    Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
-    UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")
-    

-
-    
-    C4Component
-    title Component diagram for Internet Banking System - API Application
-
-    Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
-    Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.")
-    ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
-    System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
-
-    Container_Boundary(api, "API Application") {
-        Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")
-        Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts")
-        Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.")
-        Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.")
-
-        Rel(sign, security, "Uses")
-        Rel(accounts, mbsfacade, "Uses")
-        Rel(security, db, "Read & write to", "JDBC")
-        Rel(mbsfacade, mbs, "Uses", "XML/HTTPS")
-    }
-
-    Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
-    Rel(spa, accounts, "Uses", "JSON/HTTPS")
-
-    Rel(ma, sign, "Uses", "JSON/HTTPS")
-    Rel(ma, accounts, "Uses", "JSON/HTTPS")
-
-    UpdateRelStyle(spa, sign, $offsetY="-40") 
-    UpdateRelStyle(spa, accounts, $offsetX="40", $offsetY="40")
-
-    UpdateRelStyle(ma, sign, $offsetX="-90", $offsetY="40")
-    UpdateRelStyle(ma, accounts, $offsetY="-40")
-
-        UpdateRelStyle(sign, security, $offsetX="-160", $offsetY="10")
-        UpdateRelStyle(accounts, mbsfacade, $offsetX="140", $offsetY="10")
-        UpdateRelStyle(security, db, $offsetY="-40")
-        UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
-    

-
-    
-    C4Dynamic
-    title Dynamic diagram for Internet Banking System - API Application
-
-    ContainerDb(c4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
-    Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
-    Container_Boundary(b, "API Application") {
-      Component(c3, "Security Component", "Spring Bean", "Provides functionality Related to signing in, changing passwords, etc.")
-      Component(c2, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
-    }
-    Rel(c1, c2, "Submits credentials to", "JSON/HTTPS")
-    Rel(c2, c3, "Calls isAuthenticated() on")
-    Rel(c3, c4, "select * from users where username = ?", "JDBC")
-
-    UpdateRelStyle(c1, c2, $textColor="red", $offsetY="-40")
-    UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
-    UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
-    

-
-    
-    C4Deployment
-    title Deployment Diagram for Internet Banking System - Live
-
-    Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){
-        Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
-    }
-
-    Deployment_Node(comp, "Customer's computer", "Mircosoft Windows or Apple macOS"){
-        Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,
 Apple Safari or Microsoft Edge"){
-            Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
-        }
-    }
-
-    Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){
-        Deployment_Node(dn, "bigbank-api*** x8", "Ubuntu 16.04 LTS"){
-            Deployment_Node(apache, "Apache Tomcat", "Apache Tomcat 8.x"){
-                Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.")
-            }
-        }
-        Deployment_Node(bb2, "bigbank-web*** x4", "Ubuntu 16.04 LTS"){
-            Deployment_Node(apache2, "Apache Tomcat", "Apache Tomcat 8.x"){
-                Container(web, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet Banking single page application.")
-            }
-        }
-        Deployment_Node(bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS"){
-            Deployment_Node(oracle, "Oracle - Primary", "Oracle 12c"){
-                ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
-            }
-        }
-        Deployment_Node(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS") {
-            Deployment_Node(oracle2, "Oracle - Secondary", "Oracle 12c") {
-                ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
-            }
-        }
-    }
-
-    Rel(mobile, api, "Makes API calls to", "json/HTTPS")
-    Rel(spa, api, "Makes API calls to", "json/HTTPS")
-    Rel_U(web, spa, "Delivers to the customer's web browser")
-    Rel(api, db, "Reads from and writes to", "JDBC")
-    Rel(api, db2, "Reads from and writes to", "JDBC")
-    Rel_R(db, db2, "Replicates data to")
-
-    UpdateRelStyle(spa, api, $offsetY="-40")
-    UpdateRelStyle(web, spa, $offsetY="-40")
-    UpdateRelStyle(api, db, $offsetY="-20", $offsetX="5")
-    UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20")
-    UpdateRelStyle(db, db2, $offsetY="-10")
-     

-
-    

-
-    
-    pie
-      title Key elements in Product X
-      accDescription This is a pie chart showing the key elements in Product X.
-      "Calcium" : 42.96
-      "Potassium" : 50.05
-      "Magnesium" : 10.01
-      "Iron" :  5
-    

-
-    
-    gantt
-      title Airworks roadmap
-      dateFormat YYYY-MM-DD
-      axisFormat %m-%d %a
-      excludes	weekends, 2021-10-01,2021-10-04,2021-10-05,2021-10-06,2021-10-07
-      includes 2021-10-09
-
-      section Airworks 3.4.1
-      开发	:b, 2021-10-07, 5d
-      测试	:after b, 4d
-      OK  :milestore
-      section Airworks 3.4.2
-      开发	:a, 2021-10-09, 4d
-      测试	:after a, 4d
-    

-    
-    gantt
-    title Exclusive end dates (Manual date should end on 3d)
-    dateFormat YYYY-MM-DD
-    axisFormat %d
-    section Section1
-    2 Days: 1, 2019-01-01,2d
-    Manual Date: 2, 2019-01-01,2019-01-03
-    

-    
-    gantt
-    title Inclusive end dates (Manual date should end on 4th)
-    dateFormat YYYY-MM-DD
-    axisFormat %d
-    inclusiveEndDates
-    section Section1
-    2 Days: 1, 2019-01-01,2d
-    Manual Date: 2, 2019-01-01,2019-01-03
-    

-    
-    gantt
-    title Hide today marker (vertical line should not be visible)
-    dateFormat YYYY-MM-DD
-    axisFormat %d
-    todayMarker off
-    section Section1
-    Today: 1, -1h
-    

-    
-    gantt
-    title Style today marker (vertical line should be 5px wide and half-transparent blue)
-    dateFormat YYYY-MM-DD
-    axisFormat %d
-    todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
-    section Section1
-    Today: 1, -1h
-    

-
-    

-
-    
-    graph LR
-    sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
-
-    提交申请
-    熊大
-    "];
-    class sid-B3655226-6C29-4D00-B685-3D5C734DC7E1 node-executed;
-    sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A["
-    负责人审批
-    强子
-    "];
-    class sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A node-executed;
-    sid-E27C0367-E6D6-497F-9736-3CDC21FDE221["
-    DBA审批
-    强子
-    "];
-    class sid-E27C0367-E6D6-497F-9736-3CDC21FDE221 node-executed;
-    sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD["
-    SA审批
-    阿美
-    "];
-    class sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD node-executed;
-    sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7["
-    主管审批
-    光头强
-    "];
-    class sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7 node-executed;
-    sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89["
-    DBA确认
-    强子
-    "];
-    class sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89 node-executed;
-    sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937["
-    SA确认
-    阿美
-    "];
-    class sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937 node-executed;
-    sid-4FC27B48-A6F9-460A-A675-021F5854FE22["
-    结束
-    "];
-    class sid-4FC27B48-A6F9-460A-A675-021F5854FE22 node-executed;
-    sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E["
-    SA执行1
-    强子
-    "];
-    class sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E node-executed;
-    sid-6C2120F3-D940-4958-A067-0903DCE879C4["
-    SA执行2
-    强子
-    "];
-    class sid-6C2120F3-D940-4958-A067-0903DCE879C4 node-executed;
-    sid-9180E2A0-5C4B-435F-B42F-0D152470A338["
-    DBA执行1
-    强子
-    "];
-    class sid-9180E2A0-5C4B-435F-B42F-0D152470A338 node-executed;
-    sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD["
-    DBA执行3
-    强子
-    "];
-    class sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD node-executed;
-    sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756["
-    DBA执行2
-    强子
-    "];
-    class sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756 node-executed;
-    sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93["
-    DBA执行4
-    强子
-    "];
-    class sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93 node-executed;
-    sid-1897B30A-9C5C-4D5B-B80B-76A038785070["
-    负责人确认
-    梁静茹
-    "];
-    class sid-1897B30A-9C5C-4D5B-B80B-76A038785070 node-executed;
-    sid-B3655226-6C29-4D00-B685-3D5C734DC7E1-->sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7;
-    sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A-->sid-1897B30A-9C5C-4D5B-B80B-76A038785070;
-    sid-E27C0367-E6D6-497F-9736-3CDC21FDE221-->sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89;
-    sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD-->sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937;
-    sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
-    sid-9180E2A0-5C4B-435F-B42F-0D152470A338-->sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756;
-    sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD-->sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93;
-    sid-6C2120F3-D940-4958-A067-0903DCE879C4-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
-    sid-1897B30A-9C5C-4D5B-B80B-76A038785070-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
-    sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E;
-    sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-9180E2A0-5C4B-435F-B42F-0D152470A338;
-    sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD;
-    sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
-    sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
-    sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD;
-    sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-E27C0367-E6D6-497F-9736-3CDC21FDE221;
-    sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
-    sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
-    sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
-    

-    
-    graph TD
-    A[Christmas] -->|Get money| B(Go shopping)
-    B --> C{Let me thinksssssx
sssssssssssssssssssuuu
tttsssssssssssssssssssssss}
-    C -->|One| D[Laptop]
-    C -->|Two| E[iPhone]
-    C -->|Three| F[Car]
-    

-    
-    graph TD
-    A[/Christmas\]
-    A -->|Get money| B[\Go shopping/]
-    B --> C{Let me thinksssss
ssssssssssssssssssssss
sssssssssssssssssssssssssss}
-    C -->|One| D[/Laptop/]
-    C -->|Two| E[\iPhone\]
-    C -->|Three| F[Car]
-    

-    
-    graph LR
-    47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
-    37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
-    35(SAM.CommonFA.PopulationFME)-->47(SAM.CommonFA.FMESummary)
-    41(SAM.CommonFA.MetricCost)-->47(SAM.CommonFA.FMESummary)
-    44(SAM.CommonFA.MetricOutliers)-->47(SAM.CommonFA.FMESummary)
-    46(SAM.CommonFA.MetricOpportunity)-->47(SAM.CommonFA.FMESummary)
-    40(SAM.CommonFA.OPVisits)-->47(SAM.CommonFA.FMESummary)
-    38(SAM.CommonFA.CommonFAFinanceRefund)-->47(SAM.CommonFA.FMESummary)
-    43(SAM.CommonFA.CommonFAFinancePicuDays)-->47(SAM.CommonFA.FMESummary)
-    42(SAM.CommonFA.CommonFAFinanceNurseryDays)-->47(SAM.CommonFA.FMESummary)
-    45(SAM.CommonFA.MetricPreOpportunity)-->46(SAM.CommonFA.MetricOpportunity)
-    35(SAM.CommonFA.PopulationFME)-->45(SAM.CommonFA.MetricPreOpportunity)
-    41(SAM.CommonFA.MetricCost)-->45(SAM.CommonFA.MetricPreOpportunity)
-    41(SAM.CommonFA.MetricCost)-->44(SAM.CommonFA.MetricOutliers)
-    39(SAM.CommonFA.ChargeDetails)-->43(SAM.CommonFA.CommonFAFinancePicuDays)
-    39(SAM.CommonFA.ChargeDetails)-->42(SAM.CommonFA.CommonFAFinanceNurseryDays)
-    39(SAM.CommonFA.ChargeDetails)-->41(SAM.CommonFA.MetricCost)
-    39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits)
-    35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
-    36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
-    

-    
-    graph TD
-    9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment")
-    82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1")
-    db052290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 2")
-    4e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 1")
-    30122290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 2")
-    5e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 1")
-    c1112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 2")
-    b7042290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SupportDb]")
-    8f102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[DevelopmentDb]")
-    0e102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[TestDb]")
-    07132290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SharedReportingDb]")
-    c7072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Business Logic Server")
-    ca122290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Report Server")
-    68102290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Dedicated Test Business Logic Server")
-    f4112290_1ec3_e711_8c5a_005056ad0002("fa:fa-database [DBServer\SharedDbInstance]")
-    d6072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server DBServer")
-    71082290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:MSSQLSERVER")
-    c0102290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLAgent")
-    9a072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLBrowser")
-    1d0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost1")
-    200a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost2")
-    1c0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost3")
-    9e122290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
-    9e122290_1ec3_e711_8c5a_005056ad0002-->db052290_1ec3_e711_8c5a_005056ad0002
-    9e122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
-    9e122290_1ec3_e711_8c5a_005056ad0002-->30122290_1ec3_e711_8c5a_005056ad0002
-    9e122290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
-    9e122290_1ec3_e711_8c5a_005056ad0002-->c1112290_1ec3_e711_8c5a_005056ad0002
-    82072290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
-    82072290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
-    82072290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
-    82072290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
-    db052290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
-    db052290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
-    4e112290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
-    4e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
-    4e112290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
-    4e112290_1ec3_e711_8c5a_005056ad0002-->07132290_1ec3_e711_8c5a_005056ad0002
-    4e112290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
-    30122290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
-    30122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
-    5e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
-    5e112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
-    c1112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
-    c1112290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
-    b7042290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
-    8f102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
-    0e102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
-    07132290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
-    c7072290_1ec3_e711_8c5a_005056ad0002-->1d0a2290_1ec3_e711_8c5a_005056ad0002
-    ca122290_1ec3_e711_8c5a_005056ad0002-->200a2290_1ec3_e711_8c5a_005056ad0002
-    68102290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
-    f4112290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
-    f4112290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
-    f4112290_1ec3_e711_8c5a_005056ad0002-->c0102290_1ec3_e711_8c5a_005056ad0002
-    f4112290_1ec3_e711_8c5a_005056ad0002-->9a072290_1ec3_e711_8c5a_005056ad0002
-    d6072290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
-    71082290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
-    c0102290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
-    c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
-    9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
-    9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
-    

-    
-    graph TB
-    subgraph One
-    a1-->a2
-    end
-    

-    
-    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,color:darkred
-    style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
-    

-    
-    graph LR
-    456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
-    f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
-    81dc9bdb52d04dc20036dbd8313ed055[1234 CCC fa:fa-check]
-    456ac9b0d15a8b7f1e71073221059886 -->|Node| f7f580e11d00a75814d2ded41fe8e8fe
-    f7f580e11d00a75814d2ded41fe8e8fe -->|Node| 81dc9bdb52d04dc20036dbd8313ed055
-    click 456ac9b0d15a8b7f1e71073221059886 "/admin/user/view?id=1051" "AAA
-    6000"
-    click f7f580e11d00a75814d2ded41fe8e8fe "/admin/user/view?id=1141" "BBB
-    600"
-    click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC
-    3000"
-    style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
-    

-    
-    graph TD
-    A[Christmas] -->|Get money| B(Go shopping)
-    B --> C{{Let me think...
Do I want something for work,
something to spend every free second with,
or something to get around?}}
-    C -->|One| D[Laptop]
-    C -->|Two| E[iPhone]
-    C -->|Three| F[Car]
-    click A "index.html#link-clicked" "link test"
-    click B testClick "click test"
-    classDef someclass fill:#f96;
-    class A someclass;
-    class C someclass;
-    

-    
-    graph TD
-    A([stadium shape test])
-    A -->|Get money| B([Go shopping])
-    B --> C([Let me think...
Do I want something for work,
something to spend every free second with,
or something to get around?])
-    C -->|One| D([Laptop])
-    C -->|Two| E([iPhone])
-    C -->|Three| F([Car
wroom wroom])
-    click A "index.html#link-clicked" "link test"
-    click B testClick "click test"
-    classDef someclass fill:#f96;
-    class A someclass;
-    class C someclass;
-    

-    
-    graph LR
-    A[[subroutine shape test]]
-    A -->|Get money| B[[Go shopping]]
-    B --> C[[Let me think...
Do I want something for work,
something to spend every free second with,
or something to get around?]]
-    C -->|One| D[[Laptop]]
-    C -->|Two| E[[iPhone]]
-    C -->|Three| F[[Car
wroom wroom]]
-    click A "index.html#link-clicked" "link test"
-    click B testClick "click test"
-    classDef someclass fill:#f96;
-    class A someclass;
-    class C someclass;
-    

-    
-    graph LR
-    A[(cylindrical
shape
test)]
-    A -->|Get money| B1[(Go shopping 1)]
-    A -->|Get money| B2[(Go shopping 2)]
-    A -->|Get money| B3[(Go shopping 3)]
-    C[(Let me think...
Do I want something for work,
something to spend every free second with,
or something to get around?)]
-    B1 --> C
-    B2 --> C
-    B3 --> C
-    C -->|One| D[(Laptop)]
-    C -->|Two| E[(iPhone)]
-    C -->|Three| F[(Car)]
-    click A "index.html#link-clicked" "link test"
-    click B testClick "click test"
-    classDef someclass fill:#f96;
-    class A someclass;
-    

-    
-    graph LR
-    A1[Multi
Line] -->|Multi
Line| B1(Multi
Line)
-    C1[Multi
Line] -->|Multi
Line| D1(Multi
Line)
-    E1[Multi
Line] -->|Multi
Line| F1(Multi
Line)
-    A2[Multi
Line] -->|Multi
Line| B2(Multi
Line)
-    C2[Multi
Line] -->|Multi
Line| D2(Multi
Line)
-    E2[Multi
Line] -->|Multi
Line| F2(Multi
Line)
-    linkStyle 0 stroke:DarkGray,stroke-width:2px
-    linkStyle 1 stroke:DarkGray,stroke-width:2px
-    linkStyle 2 stroke:DarkGray,stroke-width:2px
-    

-    
-    graph LR
-    A(( )) -->|step 1| B(( ))
-    B(( )) -->|step 2| C(( ))
-    C(( )) -->|step 3| D(( ))
-    linkStyle 1 stroke:greenyellow,stroke-width:2px
-    style C fill:greenyellow,stroke:green,stroke-width:4px
-    

-    
-    graph TB
-    TITLE["Link Click Events
(click the nodes below)"]
-    A["link test (open in same tab)"]
-    B["link test (open in new tab)"]
-    C[anchor test]
-    D[mailto test]
-    E[other protocol test]
-    F[script test]
-    TITLE --> A & B & C & D & E & F
-    click A "https://mermaid-js.github.io/mermaid/#/" "link test (open in same tab)"
-    click B "https://mermaid-js.github.io/mermaid/#/" "link test (open in new tab)" _blank
-    click C "#link-clicked"
-    click D "mailto:user@user.user" "mailto test"
-    click E "notes://do-your-thing/id" "other protocol test"
-    click F "javascript:alert('test')" "script test"
-    

-    

-    
-    graph LR
-    A[red
text] -->|red
text| B(blue
text)
-    C[/red
text/] -->|blue
text| D{blue
text}
-    E{{default
style}} -->|default
style| F([default
style])
-    linkStyle default color:Sienna;
-    linkStyle 0 color:red;
-    linkStyle 1 stroke:DarkGray,stroke-width:2px,color:#0000ff
-    style A color:red;
-    style B color:blue;
-    style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
-    style D stroke:#0000ff,fill:#ccccff,color:#0000ff
-    click B "index.html#link-clicked" "link test"
-    click D testClick "click test"
-    

-    
-    graph TD
-    A[myClass1] --> B[default] & C[default]
-    B[default] & C[default] --> D[myClass2]
-    classDef default stroke-width:2px,fill:none,stroke:silver
-    classDef node color:red
-    classDef myClass1 color:#0000ff
-    classDef myClass2 stroke:#0000ff,fill:#ccccff
-    class A myClass1
-    class D myClass2
-    

-
-    

-
-    
-    sequenceDiagram
-    accDescription Hello friends
-    participant Alice
-    participant Bob
-    participant John as John
Second Line
-    rect rgb(200, 220, 100)
-    rect rgb(200, 255, 200)
-    Alice ->> Bob: Hello Bob, how are you?
-    Bob-->>John: How about you John?
-    end
-    Bob--x Alice: I am good thanks!
-    Bob-x John: I am good thanks!
-    Note right of John: John thinks a long
long time, so long
that the text does
not fit on a row.
-    Bob-->Alice: Checking with John...
-    Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
-    Bob-x John: Hey John - we're still waiting to know
how you're doing
-    Note over John:nowrap: John's trying hard not to break his train of thought.
-    Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take??
-    Note over John: After a few more moments, John
finally snaps out of it.
-    end
-    alt either this
-    Alice->>John: Yes
-    else or this
-    Alice->>John: No
-    else or this will happen
-    Alice->John: Maybe
-    end
-    par this happens in parallel
-    Alice -->> Bob: Parallel message 1
-    and
-    Alice -->> John: Parallel message 2
-    end
-    

-    
-    sequenceDiagram
-    participant 1 as multiline
using #lt;br#gt;
-    participant 2 as multiline
using #lt;br/#gt;
-    participant 3 as multiline
using #lt;br /#gt;
-    participant 4 as multiline
using #lt;br /#gt;
-    1->>2: multiline
using #lt;br#gt;
-    note right of 2: multiline
using #lt;br#gt;
-    2->>3: multiline
using #lt;br/#gt;
-    note right of 3: multiline
using #lt;br/#gt;
-    3->>4: multiline
using #lt;br /#gt;
-    note right of 4: multiline
using #lt;br /#gt;
-    4->>1: multiline
using #lt;br /#gt;
-    note right of 1: multiline
using #lt;br /#gt;
-    

-    
-    sequenceDiagram
-    autonumber
-    Alice->>John: Hello John,
how are you?
-    autonumber 50 10
-    Alice->>John: John,
can you hear me?
-    John-->>Alice: Hi Alice,
I can hear you!
-    autonumber off
-    John-->>Alice: I feel great!
-    

-
-    

-
-    
-    gantt
-    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
-    Active task :active, des2, 2014-01-09, 3d
-    Future task : des3, after des2, 5d
-    Future task2 : des4, after des3, 5d
-
-    section Critical tasks
-    Completed task in the critical line :crit, done, 2014-01-06,24h
-    Implement parser and jison :crit, done, after des1, 2d
-    Create tests for parser :crit, active, 3d
-    Future task in critical line :crit, 5d
-    Create tests for renderer :2d
-    Add to mermaid :1d
-
-    section Documentation
-    Describe gantt syntax :active, a1, after des1, 3d
-    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
-    Add another diagram to demo page : 48h
-    

-    
-    gantt
-    dateFormat YYYY-MM-DD
-    axisFormat %d/%m
-    title GANTT diagram with multiline section titles
-    excludes weekdays 2014-01-10
-
-    section A section
multiline
-    Completed task : done, des1, 2014-01-06,2014-01-08
-    Active task : active, des2, 2014-01-09, 3d
-    Future task : des3, after des2, 5d
-    Future task2 : des4, after des3, 5d
-
-    section Critical tasks
multiline
-    Completed task in the critical line : crit, done, 2014-01-06, 24h
-    Implement parser and jison : crit, done, after des1, 2d
-    Create tests for parser : crit, active, 3d
-    Future task in critical line : crit, 5d
-    Create tests for renderer : 2d
-    Add to mermaid : 1d
-
-    section Documentation
multiline
-    Describe gantt syntax : active, a1, after des1, 3d
-    Add gantt diagram to demo page : after a1, 20h
-    Add another diagram to demo page : doc1, after a1, 48h
-
-    section Last section
multiline
-    Describe gantt syntax : after doc1, 3d
-    Add gantt diagram to demo page : 20h
-    Add another diagram to demo page : 48h
-    

-
-    

-
-    
-    gitGraph:
-    options
-    {
-    "nodeSpacing": 50, 
-    "nodeRadius": 5
-    }
-    end
-    branch master
-    commit
-    branch newbranch
-    checkout newbranch
-    commit
-    commit
-    checkout master
-    commit
-    commit
-    merge newbranch
-    

-
-    

-
-    
-    classDiagram
-    Class01 <|-- AveryLongClass : Cool
-
-    <<interface>> Class01
-    Class03 "0" *-- "0..n" Class04
-    Class05 "1" o-- "many" Class06
-    Class07 .. Class08
-    Class09 "many" --> "1" C2 : Where am i?
-    Class09 "0" --* "1..n" C3
-    Class09 --|> Class07
-    Class07 : equals()
-    Class07 : Object[] elementData
-    Class01 : #size()
-    Class01 : -int chimp
-    Class01 : +int gorilla
-    Class08 <--> C2: Cool label
-      class Class10 {
-      <<service>>
-      int id
-      size()
-      }
-    

-
-    
-    classDiagram
-    class Class01~T~
-    Class01 : #size()
-    Class01 : -int chimp
-    Class01 : +int gorilla
-    class Class10~T~ {
-    <<service>>
-    int id
-    size()
-    }
-    

-
-    
-    classDiagram
-    Class01~T~ <|-- AveryLongClass : Cool
-    <<interface>> Class01
-    Class03~T~ "0" *-- "0..n" Class04
-    Class05 "1" o-- "many" Class06
-    Class07~T~ .. Class08
-    Class09 "many" --> "1" C2 : Where am i?
-      Class09 "0" --* "1..n" C3
-      Class09 --|> Class07
-      Class07 : equals()
-      Class07 : Object[] elementData
-      Class01 : #size()
-      Class01 : -int chimp
-      Class01 : +int gorilla
-      Class08 <--> C2: Cool label
-        class Class10 {
-        <<service>>
-        int id
-        size()
-        }
-    

-
-    
-    classDiagram
-    Interface1 ()-- Interface1Impl
-    

-
-    
-    classDiagram 
-    direction LR
-    Animal ()-- Dog
-    Dog : bark()
-    Dog : species()
-    

-
-    
-    classDiagram 
-    direction RL
-    Fruit ()-- Apple
-    Apple : color()
-    Apple : -int leafCount()
-    Fruit ()-- Pineapple
-    Pineapple : color()
-    Pineapple : -int leafCount()
-    Pineapple : -int spikeCount()
-    

-
-    
-    stateDiagram
-    accDescription This is a state diagram showing one state
-    State1
-    

-
-    

-
-    
-    stateDiagram
-    [*] --> First
-    state First {
-    [*] --> second
-    second --> [*]
-    }
-    

-    
-    stateDiagram
-    State1: The state with a note
-    note right of State1
-    Important information! You can write
-    notes.
-    end note
-    State1 --> State2
-    note left of State2 : This is the note to the left.
-    

-    
-    stateDiagram
-    State1
-    note right of State1
-    Line1
Line2
Line3
Line4
Line5
-    end note
-    

-
-    

-
-    
-    requirementDiagram
-
-    requirement An Example {
-    id: 1
-    text: the test text.
-    risk: high
-    verifymethod: test
-    }
-
-    functionalRequirement Random Name {
-    id: 1.1
-    text: the second test text.
-    risk: low
-    verifymethod: inspection
-    }
-
-    performanceRequirement Something Else {
-    id: 1.2
-    text: the third test text.
-    risk: medium
-    verifymethod: demonstration
-    }
-
-    interfaceRequirement test_req4 {
-    id: 1.2.1
-    text: the fourth test text.
-    risk: medium
-    verifymethod: analysis
-    }
-
-    physicalRequirement test_req5 {
-    id: 1.2.2
-    text: the fifth test text.
-    risk: medium
-    verifymethod: analysis
-    }
-
-    designConstraint test_req6 {
-    id: 1.2.3
-    text: really long text to test overflow. really long text to test overflow. really long text to test overflow.
-    risk: medium
-    verifymethod: analysis
-    }
-
-    element test_entity {
-    type: simulation
-    }
-
-    element test_entity2 {
-    type: word doc
-    docRef: reqs/test_entity
-    }
-
-    element test_entity3 {
-    type: "test suite"
-    docRef: github.com/all_the_tests
-    }
-
-
-    test_entity - satisfies -> Random Name
-    An Example - traces -> Random Name
-    An Example - contains -> Something Else
-    Something Else - contains -> test_req4
-    test_req4 - derives -> test_req5
-    test_req5 - refines -> test_req6
-    test_entity3 - verifies -> test_req5
-    An Example <- copies - test_entity2
-    

-
-    
Anchor for "link-clicked" test

+    
Mermaid quick test and demo pages

+
+    
 
     
     
diff --git a/demos/pie.html b/demos/pie.html
new file mode 100644
index 000000000..3232d2534
--- /dev/null
+++ b/demos/pie.html
@@ -0,0 +1,51 @@
+
+
+  
+    
+    
+    Mermaid Quick Test Page
+    
+    
+  
+
+  
+    
+      pie title Pets adopted by volunteers
+      accTitle: simple pie char demo
+      accDescr: pie chart with 3 sections: dogs, cats, rats. Most are dogs.
+    "Dogs" : 386
+    "Cats" : 85
+    "Rats" : 15
+    

+
+    
+    pie
+      title Key elements in Product X
+        accTitle: Key elements in Product X
+      accDescr: This is a pie chart showing the key elements in Product X.
+      "Calcium" : 42.96
+      "Potassium" : 50.05
+      "Magnesium" : 10.01
+      "Iron" :  5
+    

+
+    
+  
+
diff --git a/demos/requirements.html b/demos/requirements.html
index 6bbd684a8..cebaf7e02 100644
--- a/demos/requirements.html
+++ b/demos/requirements.html
@@ -3,7 +3,7 @@
   
     
     
-    Mermaid Quick Test Page
+    Requirements Mermaid Quick Test Page