Build docs

2025-01-14 06:43:25 +08:00 · 2022-09-05 19:48:38 +05:30 · 2022-09-05 19:48:38 +05:30 · 5ae1bd92cd
commit 5ae1bd92cd
parent 5e9db250bc
28 changed files with 1621 additions and 487 deletions
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@ -158,201 +158,201 @@ mermaidAPI.initialize({

 **Closed issues:**

- Gantt and sequence diagram do not render [\#853](https://github.com/knsv/mermaid/issues/853)
- margins around flowchart are not balanced [\#852](https://github.com/knsv/mermaid/issues/852)
- Smaller bundles [\#843](https://github.com/knsv/mermaid/issues/843)
- unicode in labels [\#776](https://github.com/knsv/mermaid/issues/776)
- Hard-changing drawing of arrows per edge type [\#775](https://github.com/knsv/mermaid/issues/775)
- SequenceDiagram wrong [\#773](https://github.com/knsv/mermaid/issues/773)
- Render mermaid on github pages with simple code [\#772](https://github.com/knsv/mermaid/issues/772)
- FlowChart - large space between text and the image [\#754](https://github.com/knsv/mermaid/issues/754)
- Class Diagram Issues when using Mermaid in Stackedit [\#748](https://github.com/knsv/mermaid/issues/748)
- Multi-platform CI [\#744](https://github.com/knsv/mermaid/issues/744)
- gantt: sections can't have a colon [\#742](https://github.com/knsv/mermaid/issues/742)
- Yarn build does not add mermaid.min.css to dist [\#732](https://github.com/knsv/mermaid/issues/732)
- Is there a grammar / keyword / more than just the basic examples? [\#718](https://github.com/knsv/mermaid/issues/718)
- Click event and react component [\#717](https://github.com/knsv/mermaid/issues/717)
- Long text going outside the box [\#706](https://github.com/knsv/mermaid/issues/706)
- How to migrate from yUML to mermaid? [\#704](https://github.com/knsv/mermaid/issues/704)
- Issue on Dynamic Creation in PHP [\#690](https://github.com/knsv/mermaid/issues/690)
- `click "\#target"` and `click "http://url"` should create regular links [\#689](https://github.com/knsv/mermaid/issues/689)
- Support Chinese punctuation [\#687](https://github.com/knsv/mermaid/issues/687)
- \[Question\] Proper way to install on Mac? [\#681](https://github.com/knsv/mermaid/issues/681)
- Has Mermaid a graphical interface to make diagrams? [\#668](https://github.com/knsv/mermaid/issues/668)
- mermaid installation on debian [\#649](https://github.com/knsv/mermaid/issues/649)
- "Cannot activate" in sequenceDiagram [\#647](https://github.com/knsv/mermaid/issues/647)
- Link \("click" statement\) in flowchart does not work in exported SVG [\#646](https://github.com/knsv/mermaid/issues/646)
- How to pass styling [\#639](https://github.com/knsv/mermaid/issues/639)
- The live editor cant show seq diagram with notes for 8.0.0-alpha.3 [\#638](https://github.com/knsv/mermaid/issues/638)
- import mermaid.css with ES6 + NPM [\#634](https://github.com/knsv/mermaid/issues/634)
- Actor line cuts through other elements [\#633](https://github.com/knsv/mermaid/issues/633)
- Graph TD line out of the picture \(left side\) [\#630](https://github.com/knsv/mermaid/issues/630)
- Flowchart labels appear "cutoff" [\#628](https://github.com/knsv/mermaid/issues/628)
- Uncaught TypeError: \_.constant is not a function \(mermaid.js\) [\#626](https://github.com/knsv/mermaid/issues/626)
- Missing tags and releases for newer versions [\#623](https://github.com/knsv/mermaid/issues/623)
- Mermaid and Leo / Leo Vue [\#622](https://github.com/knsv/mermaid/issues/622)
- mermaidAPI gantt Vue.js [\#621](https://github.com/knsv/mermaid/issues/621)
- Gantt sections are not separated by colors - Fix: set numberSectionStyles to 4 instead of 3 [\#620](https://github.com/knsv/mermaid/issues/620)
- how to get mermaidAPI? [\#617](https://github.com/knsv/mermaid/issues/617)
- Error in startOnLoad documentation? [\#616](https://github.com/knsv/mermaid/issues/616)
- Example export to SVG generates error [\#614](https://github.com/knsv/mermaid/issues/614)
- The new online editor does not support previously generated links [\#613](https://github.com/knsv/mermaid/issues/613)
- Grammar / Syntax documentation for flowcharts [\#607](https://github.com/knsv/mermaid/issues/607)
- Mermaid does not work with d3.js [\#606](https://github.com/knsv/mermaid/issues/606)
- Why does this code's flowchart lines get cut-off on screen? [\#604](https://github.com/knsv/mermaid/issues/604)
- click keyword does not fire my callback \(on the demo Website too\) [\#603](https://github.com/knsv/mermaid/issues/603)
- Online Editor fails to show exported SVG [\#601](https://github.com/knsv/mermaid/issues/601)
- Just saying thanks! [\#597](https://github.com/knsv/mermaid/issues/597)
- stylesheet crashed with other library like abcjs [\#596](https://github.com/knsv/mermaid/issues/596)
- Missing connection [\#594](https://github.com/knsv/mermaid/issues/594)
- How to use mermaid on node.js restful api? [\#593](https://github.com/knsv/mermaid/issues/593)
- Remove status code [\#589](https://github.com/knsv/mermaid/issues/589)
- Golang based editor [\#588](https://github.com/knsv/mermaid/issues/588)
- sequenceDiagram -\> notetext css font is hardcoded [\#587](https://github.com/knsv/mermaid/issues/587)
- Multiple graph in the live editor [\#586](https://github.com/knsv/mermaid/issues/586)
- All \<svg\> elements in page are colored black [\#584](https://github.com/knsv/mermaid/issues/584)
- Styling: classes aren't applied to elements. [\#582](https://github.com/knsv/mermaid/issues/582)
- Rounded connections [\#580](https://github.com/knsv/mermaid/issues/580)
- Arrows are not being shown correctly in the dark theme [\#578](https://github.com/knsv/mermaid/issues/578)
- The documentation for CLI seems outdated. [\#572](https://github.com/knsv/mermaid/issues/572)
- No effect of click event:can not open link [\#571](https://github.com/knsv/mermaid/issues/571)
- Text colors are not correct in VSCODE [\#570](https://github.com/knsv/mermaid/issues/570)
- Nodes aren't aligned properly \(just need an explanation\) [\#568](https://github.com/knsv/mermaid/issues/568)
- setting margin around figure in R [\#567](https://github.com/knsv/mermaid/issues/567)
- Arrows should Come out in upward and Downward direction from decision Node [\#566](https://github.com/knsv/mermaid/issues/566)
- TypeError: Cannot read property 'select' of undefined [\#563](https://github.com/knsv/mermaid/issues/563)
- A little bug [\#557](https://github.com/knsv/mermaid/issues/557)
- Japanese text appears garbled [\#554](https://github.com/knsv/mermaid/issues/554)
- classdiagram not works in mermaid live_editor [\#553](https://github.com/knsv/mermaid/issues/553)
- font awesome in link text? [\#546](https://github.com/knsv/mermaid/issues/546)
- q: heard of the cosmogol standard? [\#545](https://github.com/knsv/mermaid/issues/545)
- Arrow heads missing \(cli, 7.0.3\) [\#544](https://github.com/knsv/mermaid/issues/544)
- No Edge Boxes if useHtmlLabels=false [\#541](https://github.com/knsv/mermaid/issues/541)
- how to change mermaid text color or line text block color？ [\#534](https://github.com/knsv/mermaid/issues/534)
- FlowChart visualization broken when downloading from live editor [\#533](https://github.com/knsv/mermaid/issues/533)
- Can't get flowchart to render paths at the top of the diagram; I even tried the online editor and that shows the same issue. Thoughts? [\#532](https://github.com/knsv/mermaid/issues/532)
- live editor make browser\(safari on macOS&iOS\) not longer respond [\#531](https://github.com/knsv/mermaid/issues/531)
- css classes need a prefix/namespace [\#527](https://github.com/knsv/mermaid/issues/527)
- input activate/deactivate cause safari unresponding [\#521](https://github.com/knsv/mermaid/issues/521)
- Cannot Render the Mermaid Graph to PDF ? [\#520](https://github.com/knsv/mermaid/issues/520)
- clicking links works from inset in subgraph but not from nodes [\#516](https://github.com/knsv/mermaid/issues/516)
- Strange syntax error - when importing mermaid.js [\#515](https://github.com/knsv/mermaid/issues/515)
- gantt x-axis display [\#510](https://github.com/knsv/mermaid/issues/510)
- phantomjs renamed to phantomjs-prebuilt [\#508](https://github.com/knsv/mermaid/issues/508)
- issue when using sphinxcontrib-mermaid extension for sphinx [\#507](https://github.com/knsv/mermaid/issues/507)
- layout of docs page looks broken [\#504](https://github.com/knsv/mermaid/issues/504)
- Problem showing graph with php on localhost [\#502](https://github.com/knsv/mermaid/issues/502)
- logLevel's option doesn't work at 7.0.0 [\#501](https://github.com/knsv/mermaid/issues/501)
- How do I get the log for a render or parse attempt? [\#500](https://github.com/knsv/mermaid/issues/500)
- Mermaid neutral style style to built in latest release [\#499](https://github.com/knsv/mermaid/issues/499)
- Any plans for adding a typescript definition file? [\#495](https://github.com/knsv/mermaid/issues/495)
- Gantt diagrams too narrow [\#493](https://github.com/knsv/mermaid/issues/493)
- Flowchart edge labels placement [\#490](https://github.com/knsv/mermaid/issues/490)
- Very different styles when rendering as png vs. svg [\#489](https://github.com/knsv/mermaid/issues/489)
- New editor that supports mermaid: Caret [\#488](https://github.com/knsv/mermaid/issues/488)
- Gant PNG margin [\#486](https://github.com/knsv/mermaid/issues/486)
- ReferenceError: window is not defined [\#485](https://github.com/knsv/mermaid/issues/485)
- Menu and layout bugs in docs [\#484](https://github.com/knsv/mermaid/issues/484)
- Mermaid resets some of the page CSS styles [\#482](https://github.com/knsv/mermaid/issues/482)
- Arrows rendering incorrectly in online editor [\#480](https://github.com/knsv/mermaid/issues/480)
- CSS stroke-dasharray ignored by browsers but not other viewers [\#474](https://github.com/knsv/mermaid/issues/474)
- mermaid - Browser Support issue [\#472](https://github.com/knsv/mermaid/issues/472)
- Totally love mermaid I might pop! [\#471](https://github.com/knsv/mermaid/issues/471)
- Sequence Diagram: Missing x on async arrows \(png\) [\#469](https://github.com/knsv/mermaid/issues/469)
- live editor: the svg file rendered from graph is not supported by browsers [\#468](https://github.com/knsv/mermaid/issues/468)
- Not found css [\#462](https://github.com/knsv/mermaid/issues/462)
- Phantomjs Dependency [\#461](https://github.com/knsv/mermaid/issues/461)
- Mermaid cli not working for subgraphs [\#459](https://github.com/knsv/mermaid/issues/459)
- Support for notes across multiple participants? [\#458](https://github.com/knsv/mermaid/issues/458)
- Related to Issue \#329: Phantomjs issues. [\#455](https://github.com/knsv/mermaid/issues/455)
- Add a click style [\#426](https://github.com/knsv/mermaid/issues/426)
- Add Parallel block \(par\) to sequence diagrams [\#425](https://github.com/knsv/mermaid/issues/425)
- updating shapes after the flow chart rendering complete [\#424](https://github.com/knsv/mermaid/issues/424)
- can't catch parse error Maximum call stack size exceeded on safari [\#421](https://github.com/knsv/mermaid/issues/421)
- Arrows endings are missing [\#419](https://github.com/knsv/mermaid/issues/419)
- shouldn't mermaid become more like Markdown ? [\#417](https://github.com/knsv/mermaid/issues/417)
- Live editor show rendered diagram if syntax invalid [\#415](https://github.com/knsv/mermaid/issues/415)
- Linkstyle stroke does not work [\#410](https://github.com/knsv/mermaid/issues/410)
- flowchart id's with dots in them .. break links [\#408](https://github.com/knsv/mermaid/issues/408)
- Flowchart: Link text beginning with lowercase 'o' causes flowchart to break [\#407](https://github.com/knsv/mermaid/issues/407)
- Some Chinese character will case Safari no responding. [\#405](https://github.com/knsv/mermaid/issues/405)
- Cannot center-justify text in nodes? [\#397](https://github.com/knsv/mermaid/issues/397)
- Edge labels should have white background in live editor [\#396](https://github.com/knsv/mermaid/issues/396)
- Live editor does not support activate/deactivate [\#394](https://github.com/knsv/mermaid/issues/394)
- Styling subgraph? [\#391](https://github.com/knsv/mermaid/issues/391)
- Update live editor to version 6.0.0 [\#387](https://github.com/knsv/mermaid/issues/387)
- sequence diagram config issue [\#385](https://github.com/knsv/mermaid/issues/385)
- How to add newline in the text [\#384](https://github.com/knsv/mermaid/issues/384)
- PhantomJS crashes on a large graph [\#380](https://github.com/knsv/mermaid/issues/380)
- Finnish support for class diagrams using plantuml syntax [\#377](https://github.com/knsv/mermaid/issues/377)
- mermaidAPI.render generated different svg code from mermaid.int\(\) [\#374](https://github.com/knsv/mermaid/issues/374)
- Put your own action on the chart [\#372](https://github.com/knsv/mermaid/issues/372)
- when declaring participants the elements are generated twice [\#370](https://github.com/knsv/mermaid/issues/370)
- Example Flowchart is cut in display \(Chrome\). [\#368](https://github.com/knsv/mermaid/issues/368)
- Add shebang support to diagrams [\#365](https://github.com/knsv/mermaid/issues/365)
- Silencing CLI output [\#352](https://github.com/knsv/mermaid/issues/352)
- SequenceDiagram: 3+ Alternative Paths [\#348](https://github.com/knsv/mermaid/issues/348)
- Smaller height of actor boxes [\#342](https://github.com/knsv/mermaid/issues/342)
- Question: lib/phantomscript.js - foreignObjects in SVG - related to \#58 [\#340](https://github.com/knsv/mermaid/issues/340)
- npm test fails on osx being blocked at Can not load "PhantomJS", it is not registered! [\#337](https://github.com/knsv/mermaid/issues/337)
- Tabs & subgraphs cause rendering error [\#336](https://github.com/knsv/mermaid/issues/336)
- Display question: right angles [\#335](https://github.com/knsv/mermaid/issues/335)
- No Arrows rendered v0.5.8 [\#330](https://github.com/knsv/mermaid/issues/330)
- You had errors in your syntax. Use --help for further information. [\#327](https://github.com/knsv/mermaid/issues/327)
- Allow alternate arrow syntax that doesn't close html comments [\#322](https://github.com/knsv/mermaid/issues/322)
- Comment in subgraph [\#319](https://github.com/knsv/mermaid/issues/319)
- Update graph [\#311](https://github.com/knsv/mermaid/issues/311)
- css conflicts with boostrap's css [\#308](https://github.com/knsv/mermaid/issues/308)
- Can not get click event to fire. [\#306](https://github.com/knsv/mermaid/issues/306)
- Fix phantomjs2 compatibility [\#304](https://github.com/knsv/mermaid/issues/304)
- Flowcharts do not work in native IE11 [\#303](https://github.com/knsv/mermaid/issues/303)
- Integration with remark.js - tutorial added [\#302](https://github.com/knsv/mermaid/issues/302)
- Sequence diagram Loops: changing boxMargin spoils the "loop" notation [\#299](https://github.com/knsv/mermaid/issues/299)
- src/mermaid.js generates bad code [\#297](https://github.com/knsv/mermaid/issues/297)
- Fresh fork: jasmine tests fail [\#294](https://github.com/knsv/mermaid/issues/294)
- CSS clash [\#292](https://github.com/knsv/mermaid/issues/292)
- Mermaid does not work in Chrome 48 [\#281](https://github.com/knsv/mermaid/issues/281)
- circle and ellipse cannot change color by classDef [\#271](https://github.com/knsv/mermaid/issues/271)
- npm run watch doesn't work due missing dependencies [\#266](https://github.com/knsv/mermaid/issues/266)
- label out of node [\#262](https://github.com/knsv/mermaid/issues/262)
- IE11 Support issue [\#261](https://github.com/knsv/mermaid/issues/261)
- mermaid without browser [\#260](https://github.com/knsv/mermaid/issues/260)
- Insufficient capacity of gantt diagrams [\#226](https://github.com/knsv/mermaid/issues/226)
- some WARN about installation [\#222](https://github.com/knsv/mermaid/issues/222)
- Live editor offline access [\#217](https://github.com/knsv/mermaid/issues/217)
- suggest: code highlight mode config for editors [\#212](https://github.com/knsv/mermaid/issues/212)
- Uncaught RangeError: Maximum call stack size exceeded [\#189](https://github.com/knsv/mermaid/issues/189)
- Styling label texts [\#50](https://github.com/knsv/mermaid/issues/50)
+- Gantt and sequence diagram do not render [#853](https://github.com/knsv/mermaid/issues/853)
+- margins around flowchart are not balanced [#852](https://github.com/knsv/mermaid/issues/852)
+- Smaller bundles [#843](https://github.com/knsv/mermaid/issues/843)
+- unicode in labels [#776](https://github.com/knsv/mermaid/issues/776)
+- Hard-changing drawing of arrows per edge type [#775](https://github.com/knsv/mermaid/issues/775)
+- SequenceDiagram wrong [#773](https://github.com/knsv/mermaid/issues/773)
+- Render mermaid on github pages with simple code [#772](https://github.com/knsv/mermaid/issues/772)
+- FlowChart - large space between text and the image [#754](https://github.com/knsv/mermaid/issues/754)
+- Class Diagram Issues when using Mermaid in Stackedit [#748](https://github.com/knsv/mermaid/issues/748)
+- Multi-platform CI [#744](https://github.com/knsv/mermaid/issues/744)
+- gantt: sections can't have a colon [#742](https://github.com/knsv/mermaid/issues/742)
+- Yarn build does not add mermaid.min.css to dist [#732](https://github.com/knsv/mermaid/issues/732)
+- Is there a grammar / keyword / more than just the basic examples? [#718](https://github.com/knsv/mermaid/issues/718)
+- Click event and react component [#717](https://github.com/knsv/mermaid/issues/717)
+- Long text going outside the box [#706](https://github.com/knsv/mermaid/issues/706)
+- How to migrate from yUML to mermaid? [#704](https://github.com/knsv/mermaid/issues/704)
+- Issue on Dynamic Creation in PHP [#690](https://github.com/knsv/mermaid/issues/690)
+- `click "\#target"` and `click "http://url"` should create regular links [#689](https://github.com/knsv/mermaid/issues/689)
+- Support Chinese punctuation [#687](https://github.com/knsv/mermaid/issues/687)
+- \[Question] Proper way to install on Mac? [#681](https://github.com/knsv/mermaid/issues/681)
+- Has Mermaid a graphical interface to make diagrams? [#668](https://github.com/knsv/mermaid/issues/668)
+- mermaid installation on debian [#649](https://github.com/knsv/mermaid/issues/649)
+- "Cannot activate" in sequenceDiagram [#647](https://github.com/knsv/mermaid/issues/647)
+- Link ("click" statement) in flowchart does not work in exported SVG [#646](https://github.com/knsv/mermaid/issues/646)
+- How to pass styling [#639](https://github.com/knsv/mermaid/issues/639)
+- The live editor cant show seq diagram with notes for 8.0.0-alpha.3 [#638](https://github.com/knsv/mermaid/issues/638)
+- import mermaid.css with ES6 + NPM [#634](https://github.com/knsv/mermaid/issues/634)
+- Actor line cuts through other elements [#633](https://github.com/knsv/mermaid/issues/633)
+- Graph TD line out of the picture (left side) [#630](https://github.com/knsv/mermaid/issues/630)
+- Flowchart labels appear "cutoff" [#628](https://github.com/knsv/mermaid/issues/628)
+- Uncaught TypeError: \_.constant is not a function (mermaid.js) [#626](https://github.com/knsv/mermaid/issues/626)
+- Missing tags and releases for newer versions [#623](https://github.com/knsv/mermaid/issues/623)
+- Mermaid and Leo / Leo Vue [#622](https://github.com/knsv/mermaid/issues/622)
+- mermaidAPI gantt Vue.js [#621](https://github.com/knsv/mermaid/issues/621)
+- Gantt sections are not separated by colors - Fix: set numberSectionStyles to 4 instead of 3 [#620](https://github.com/knsv/mermaid/issues/620)
+- how to get mermaidAPI? [#617](https://github.com/knsv/mermaid/issues/617)
+- Error in startOnLoad documentation? [#616](https://github.com/knsv/mermaid/issues/616)
+- Example export to SVG generates error [#614](https://github.com/knsv/mermaid/issues/614)
+- The new online editor does not support previously generated links [#613](https://github.com/knsv/mermaid/issues/613)
+- Grammar / Syntax documentation for flowcharts [#607](https://github.com/knsv/mermaid/issues/607)
+- Mermaid does not work with d3.js [#606](https://github.com/knsv/mermaid/issues/606)
+- Why does this code's flowchart lines get cut-off on screen? [#604](https://github.com/knsv/mermaid/issues/604)
+- click keyword does not fire my callback (on the demo Website too) [#603](https://github.com/knsv/mermaid/issues/603)
+- Online Editor fails to show exported SVG [#601](https://github.com/knsv/mermaid/issues/601)
+- Just saying thanks! [#597](https://github.com/knsv/mermaid/issues/597)
+- stylesheet crashed with other library like abcjs [#596](https://github.com/knsv/mermaid/issues/596)
+- Missing connection [#594](https://github.com/knsv/mermaid/issues/594)
+- How to use mermaid on node.js restful api? [#593](https://github.com/knsv/mermaid/issues/593)
+- Remove status code [#589](https://github.com/knsv/mermaid/issues/589)
+- Golang based editor [#588](https://github.com/knsv/mermaid/issues/588)
+- sequenceDiagram -> notetext css font is hardcoded [#587](https://github.com/knsv/mermaid/issues/587)
+- Multiple graph in the live editor [#586](https://github.com/knsv/mermaid/issues/586)
+- All \<svg> elements in page are colored black [#584](https://github.com/knsv/mermaid/issues/584)
+- Styling: classes aren't applied to elements. [#582](https://github.com/knsv/mermaid/issues/582)
+- Rounded connections [#580](https://github.com/knsv/mermaid/issues/580)
+- Arrows are not being shown correctly in the dark theme [#578](https://github.com/knsv/mermaid/issues/578)
+- The documentation for CLI seems outdated. [#572](https://github.com/knsv/mermaid/issues/572)
+- No effect of click event:can not open link [#571](https://github.com/knsv/mermaid/issues/571)
+- Text colors are not correct in VSCODE [#570](https://github.com/knsv/mermaid/issues/570)
+- Nodes aren't aligned properly (just need an explanation) [#568](https://github.com/knsv/mermaid/issues/568)
+- setting margin around figure in R [#567](https://github.com/knsv/mermaid/issues/567)
+- Arrows should Come out in upward and Downward direction from decision Node [#566](https://github.com/knsv/mermaid/issues/566)
+- TypeError: Cannot read property 'select' of undefined [#563](https://github.com/knsv/mermaid/issues/563)
+- A little bug [#557](https://github.com/knsv/mermaid/issues/557)
+- Japanese text appears garbled [#554](https://github.com/knsv/mermaid/issues/554)
+- classdiagram not works in mermaid live_editor [#553](https://github.com/knsv/mermaid/issues/553)
+- font awesome in link text? [#546](https://github.com/knsv/mermaid/issues/546)
+- q: heard of the cosmogol standard? [#545](https://github.com/knsv/mermaid/issues/545)
+- Arrow heads missing (cli, 7.0.3) [#544](https://github.com/knsv/mermaid/issues/544)
+- No Edge Boxes if useHtmlLabels=false [#541](https://github.com/knsv/mermaid/issues/541)
+- how to change mermaid text color or line text block color？ [#534](https://github.com/knsv/mermaid/issues/534)
+- FlowChart visualization broken when downloading from live editor [#533](https://github.com/knsv/mermaid/issues/533)
+- Can't get flowchart to render paths at the top of the diagram; I even tried the online editor and that shows the same issue. Thoughts? [#532](https://github.com/knsv/mermaid/issues/532)
+- live editor make browser(safari on macOS\&iOS) not longer respond [#531](https://github.com/knsv/mermaid/issues/531)
+- css classes need a prefix/namespace [#527](https://github.com/knsv/mermaid/issues/527)
+- input activate/deactivate cause safari unresponding [#521](https://github.com/knsv/mermaid/issues/521)
+- Cannot Render the Mermaid Graph to PDF ? [#520](https://github.com/knsv/mermaid/issues/520)
+- clicking links works from inset in subgraph but not from nodes [#516](https://github.com/knsv/mermaid/issues/516)
+- Strange syntax error - when importing mermaid.js [#515](https://github.com/knsv/mermaid/issues/515)
+- gantt x-axis display [#510](https://github.com/knsv/mermaid/issues/510)
+- phantomjs renamed to phantomjs-prebuilt [#508](https://github.com/knsv/mermaid/issues/508)
+- issue when using sphinxcontrib-mermaid extension for sphinx [#507](https://github.com/knsv/mermaid/issues/507)
+- layout of docs page looks broken [#504](https://github.com/knsv/mermaid/issues/504)
+- Problem showing graph with php on localhost [#502](https://github.com/knsv/mermaid/issues/502)
+- logLevel's option doesn't work at 7.0.0 [#501](https://github.com/knsv/mermaid/issues/501)
+- How do I get the log for a render or parse attempt? [#500](https://github.com/knsv/mermaid/issues/500)
+- Mermaid neutral style style to built in latest release [#499](https://github.com/knsv/mermaid/issues/499)
+- Any plans for adding a typescript definition file? [#495](https://github.com/knsv/mermaid/issues/495)
+- Gantt diagrams too narrow [#493](https://github.com/knsv/mermaid/issues/493)
+- Flowchart edge labels placement [#490](https://github.com/knsv/mermaid/issues/490)
+- Very different styles when rendering as png vs. svg [#489](https://github.com/knsv/mermaid/issues/489)
+- New editor that supports mermaid: Caret [#488](https://github.com/knsv/mermaid/issues/488)
+- Gant PNG margin [#486](https://github.com/knsv/mermaid/issues/486)
+- ReferenceError: window is not defined [#485](https://github.com/knsv/mermaid/issues/485)
+- Menu and layout bugs in docs [#484](https://github.com/knsv/mermaid/issues/484)
+- Mermaid resets some of the page CSS styles [#482](https://github.com/knsv/mermaid/issues/482)
+- Arrows rendering incorrectly in online editor [#480](https://github.com/knsv/mermaid/issues/480)
+- CSS stroke-dasharray ignored by browsers but not other viewers [#474](https://github.com/knsv/mermaid/issues/474)
+- mermaid - Browser Support issue [#472](https://github.com/knsv/mermaid/issues/472)
+- Totally love mermaid I might pop! [#471](https://github.com/knsv/mermaid/issues/471)
+- Sequence Diagram: Missing x on async arrows (png) [#469](https://github.com/knsv/mermaid/issues/469)
+- live editor: the svg file rendered from graph is not supported by browsers [#468](https://github.com/knsv/mermaid/issues/468)
+- Not found css [#462](https://github.com/knsv/mermaid/issues/462)
+- Phantomjs Dependency [#461](https://github.com/knsv/mermaid/issues/461)
+- Mermaid cli not working for subgraphs [#459](https://github.com/knsv/mermaid/issues/459)
+- Support for notes across multiple participants? [#458](https://github.com/knsv/mermaid/issues/458)
+- Related to Issue #329: Phantomjs issues. [#455](https://github.com/knsv/mermaid/issues/455)
+- Add a click style [#426](https://github.com/knsv/mermaid/issues/426)
+- Add Parallel block (par) to sequence diagrams [#425](https://github.com/knsv/mermaid/issues/425)
+- updating shapes after the flow chart rendering complete [#424](https://github.com/knsv/mermaid/issues/424)
+- can't catch parse error Maximum call stack size exceeded on safari [#421](https://github.com/knsv/mermaid/issues/421)
+- Arrows endings are missing [#419](https://github.com/knsv/mermaid/issues/419)
+- shouldn't mermaid become more like Markdown ? [#417](https://github.com/knsv/mermaid/issues/417)
+- Live editor show rendered diagram if syntax invalid [#415](https://github.com/knsv/mermaid/issues/415)
+- Linkstyle stroke does not work [#410](https://github.com/knsv/mermaid/issues/410)
+- flowchart id's with dots in them .. break links [#408](https://github.com/knsv/mermaid/issues/408)
+- Flowchart: Link text beginning with lowercase 'o' causes flowchart to break [#407](https://github.com/knsv/mermaid/issues/407)
+- Some Chinese character will case Safari no responding. [#405](https://github.com/knsv/mermaid/issues/405)
+- Cannot center-justify text in nodes? [#397](https://github.com/knsv/mermaid/issues/397)
+- Edge labels should have white background in live editor [#396](https://github.com/knsv/mermaid/issues/396)
+- Live editor does not support activate/deactivate [#394](https://github.com/knsv/mermaid/issues/394)
+- Styling subgraph? [#391](https://github.com/knsv/mermaid/issues/391)
+- Update live editor to version 6.0.0 [#387](https://github.com/knsv/mermaid/issues/387)
+- sequence diagram config issue [#385](https://github.com/knsv/mermaid/issues/385)
+- How to add newline in the text [#384](https://github.com/knsv/mermaid/issues/384)
+- PhantomJS crashes on a large graph [#380](https://github.com/knsv/mermaid/issues/380)
+- Finnish support for class diagrams using plantuml syntax [#377](https://github.com/knsv/mermaid/issues/377)
+- mermaidAPI.render generated different svg code from mermaid.int() [#374](https://github.com/knsv/mermaid/issues/374)
+- Put your own action on the chart [#372](https://github.com/knsv/mermaid/issues/372)
+- when declaring participants the elements are generated twice [#370](https://github.com/knsv/mermaid/issues/370)
+- Example Flowchart is cut in display (Chrome). [#368](https://github.com/knsv/mermaid/issues/368)
+- Add shebang support to diagrams [#365](https://github.com/knsv/mermaid/issues/365)
+- Silencing CLI output [#352](https://github.com/knsv/mermaid/issues/352)
+- SequenceDiagram: 3+ Alternative Paths [#348](https://github.com/knsv/mermaid/issues/348)
+- Smaller height of actor boxes [#342](https://github.com/knsv/mermaid/issues/342)
+- Question: lib/phantomscript.js - foreignObjects in SVG - related to #58 [#340](https://github.com/knsv/mermaid/issues/340)
+- npm test fails on osx being blocked at Can not load "PhantomJS", it is not registered! [#337](https://github.com/knsv/mermaid/issues/337)
+- Tabs & subgraphs cause rendering error [#336](https://github.com/knsv/mermaid/issues/336)
+- Display question: right angles [#335](https://github.com/knsv/mermaid/issues/335)
+- No Arrows rendered v0.5.8 [#330](https://github.com/knsv/mermaid/issues/330)
+- You had errors in your syntax. Use --help for further information. [#327](https://github.com/knsv/mermaid/issues/327)
+- Allow alternate arrow syntax that doesn't close html comments [#322](https://github.com/knsv/mermaid/issues/322)
+- Comment in subgraph [#319](https://github.com/knsv/mermaid/issues/319)
+- Update graph [#311](https://github.com/knsv/mermaid/issues/311)
+- css conflicts with boostrap's css [#308](https://github.com/knsv/mermaid/issues/308)
+- Can not get click event to fire. [#306](https://github.com/knsv/mermaid/issues/306)
+- Fix phantomjs2 compatibility [#304](https://github.com/knsv/mermaid/issues/304)
+- Flowcharts do not work in native IE11 [#303](https://github.com/knsv/mermaid/issues/303)
+- Integration with remark.js - tutorial added [#302](https://github.com/knsv/mermaid/issues/302)
+- Sequence diagram Loops: changing boxMargin spoils the "loop" notation [#299](https://github.com/knsv/mermaid/issues/299)
+- src/mermaid.js generates bad code [#297](https://github.com/knsv/mermaid/issues/297)
+- Fresh fork: jasmine tests fail [#294](https://github.com/knsv/mermaid/issues/294)
+- CSS clash [#292](https://github.com/knsv/mermaid/issues/292)
+- Mermaid does not work in Chrome 48 [#281](https://github.com/knsv/mermaid/issues/281)
+- circle and ellipse cannot change color by classDef [#271](https://github.com/knsv/mermaid/issues/271)
+- npm run watch doesn't work due missing dependencies [#266](https://github.com/knsv/mermaid/issues/266)
+- label out of node [#262](https://github.com/knsv/mermaid/issues/262)
+- IE11 Support issue [#261](https://github.com/knsv/mermaid/issues/261)
+- mermaid without browser [#260](https://github.com/knsv/mermaid/issues/260)
+- Insufficient capacity of gantt diagrams [#226](https://github.com/knsv/mermaid/issues/226)
+- some WARN about installation [#222](https://github.com/knsv/mermaid/issues/222)
+- Live editor offline access [#217](https://github.com/knsv/mermaid/issues/217)
+- suggest: code highlight mode config for editors [#212](https://github.com/knsv/mermaid/issues/212)
+- Uncaught RangeError: Maximum call stack size exceeded [#189](https://github.com/knsv/mermaid/issues/189)
+- Styling label texts [#50](https://github.com/knsv/mermaid/issues/50)

 **Merged pull requests:**

- Remove console.log in classDB. [\#861](https://github.com/knsv/mermaid/pull/861) ([Arthaey](https://github.com/Arthaey))
- Bump sshpk from 1.13.1 to 1.16.1 [\#851](https://github.com/knsv/mermaid/pull/851) ([dependabot[bot]](https://github.com/apps/dependabot))
- Significantly smaller bundles [\#850](https://github.com/knsv/mermaid/pull/850) ([fabiospampinato](https://github.com/fabiospampinato))
- Support styling of subgraphs [\#845](https://github.com/knsv/mermaid/pull/845) ([Qix-](https://github.com/Qix-))
- fix dark theme loop labels not visible [\#837](https://github.com/knsv/mermaid/pull/837) ([jnnnnn](https://github.com/jnnnnn))
- fix draw function can only call once [\#832](https://github.com/knsv/mermaid/pull/832) ([vaniship](https://github.com/vaniship))
- Fix dotted lines not appearing in flowcharts when HTML labels disabled [\#828](https://github.com/knsv/mermaid/pull/828) ([stanhu](https://github.com/stanhu))
- Fix issue with XML line breaks inside vertex labels [\#824](https://github.com/knsv/mermaid/pull/824) ([jsyang](https://github.com/jsyang))
- fixed diagrams [\#810](https://github.com/knsv/mermaid/pull/810) ([0xflotus](https://github.com/0xflotus))
- Clickable gantt tasks [\#804](https://github.com/knsv/mermaid/pull/804) ([abzicht](https://github.com/abzicht))
- linkStyle now supports list of indexes with a few tests [\#798](https://github.com/knsv/mermaid/pull/798) ([ivan-danilov](https://github.com/ivan-danilov))
- fix class diagram mermaid [\#795](https://github.com/knsv/mermaid/pull/795) ([DanShai](https://github.com/DanShai))
- Added exclude weekdays to definition [\#792](https://github.com/knsv/mermaid/pull/792) ([jopapo](https://github.com/jopapo))
- SVG link rendering [\#791](https://github.com/knsv/mermaid/pull/791) ([flying-sheep](https://github.com/flying-sheep))
- Gantt milestones [\#788](https://github.com/knsv/mermaid/pull/788) ([gijswijs](https://github.com/gijswijs))
- Remove duplicate code [\#768](https://github.com/knsv/mermaid/pull/768) ([znxkznxk1030](https://github.com/znxkznxk1030))
- Render nodes as real links [\#765](https://github.com/knsv/mermaid/pull/765) ([flying-sheep](https://github.com/flying-sheep))
- Fix issue with marker-end. [\#757](https://github.com/knsv/mermaid/pull/757) ([gjlubbertsen](https://github.com/gjlubbertsen))
- Make Class Diagrams usable in Stackedit and Live Editor [\#749](https://github.com/knsv/mermaid/pull/749) ([monsterkrampe](https://github.com/monsterkrampe))
- Adding trapezoid and inverse trapezoid vertex options. [\#741](https://github.com/knsv/mermaid/pull/741) ([adamwulf](https://github.com/adamwulf))
- Add option for right angles [\#721](https://github.com/knsv/mermaid/pull/721) ([paulbland](https://github.com/paulbland))
- Add nested activation classes [\#720](https://github.com/knsv/mermaid/pull/720) ([paulbland](https://github.com/paulbland))
- wip: class diagram cardinality display [\#705](https://github.com/knsv/mermaid/pull/705) ([Vrixyz](https://github.com/Vrixyz))
- add comments about CSS in config [\#688](https://github.com/knsv/mermaid/pull/688) ([imma90](https://github.com/imma90))
- SequenceDiagram: Add support for multiple alt else statements [\#641](https://github.com/knsv/mermaid/pull/641) ([sechel](https://github.com/sechel))
- fix \#426 - add class .clickable on nodes with click function or link [\#598](https://github.com/knsv/mermaid/pull/598) ([thomasleveil](https://github.com/thomasleveil))
- Spec fix 1 [\#595](https://github.com/knsv/mermaid/pull/595) ([frankschmitt](https://github.com/frankschmitt))
+- Remove console.log in classDB. [#861](https://github.com/knsv/mermaid/pull/861) ([Arthaey](https://github.com/Arthaey))
+- Bump sshpk from 1.13.1 to 1.16.1 [#851](https://github.com/knsv/mermaid/pull/851) ([dependabot\[bot\]](https://github.com/apps/dependabot))
+- Significantly smaller bundles [#850](https://github.com/knsv/mermaid/pull/850) ([fabiospampinato](https://github.com/fabiospampinato))
+- Support styling of subgraphs [#845](https://github.com/knsv/mermaid/pull/845) ([Qix-](https://github.com/Qix-))
+- fix dark theme loop labels not visible [#837](https://github.com/knsv/mermaid/pull/837) ([jnnnnn](https://github.com/jnnnnn))
+- fix draw function can only call once [#832](https://github.com/knsv/mermaid/pull/832) ([vaniship](https://github.com/vaniship))
+- Fix dotted lines not appearing in flowcharts when HTML labels disabled [#828](https://github.com/knsv/mermaid/pull/828) ([stanhu](https://github.com/stanhu))
+- Fix issue with XML line breaks inside vertex labels [#824](https://github.com/knsv/mermaid/pull/824) ([jsyang](https://github.com/jsyang))
+- fixed diagrams [#810](https://github.com/knsv/mermaid/pull/810) ([0xflotus](https://github.com/0xflotus))
+- Clickable gantt tasks [#804](https://github.com/knsv/mermaid/pull/804) ([abzicht](https://github.com/abzicht))
+- linkStyle now supports list of indexes with a few tests [#798](https://github.com/knsv/mermaid/pull/798) ([ivan-danilov](https://github.com/ivan-danilov))
+- fix class diagram mermaid [#795](https://github.com/knsv/mermaid/pull/795) ([DanShai](https://github.com/DanShai))
+- Added exclude weekdays to definition [#792](https://github.com/knsv/mermaid/pull/792) ([jopapo](https://github.com/jopapo))
+- SVG link rendering [#791](https://github.com/knsv/mermaid/pull/791) ([flying-sheep](https://github.com/flying-sheep))
+- Gantt milestones [#788](https://github.com/knsv/mermaid/pull/788) ([gijswijs](https://github.com/gijswijs))
+- Remove duplicate code [#768](https://github.com/knsv/mermaid/pull/768) ([znxkznxk1030](https://github.com/znxkznxk1030))
+- Render nodes as real links [#765](https://github.com/knsv/mermaid/pull/765) ([flying-sheep](https://github.com/flying-sheep))
+- Fix issue with marker-end. [#757](https://github.com/knsv/mermaid/pull/757) ([gjlubbertsen](https://github.com/gjlubbertsen))
+- Make Class Diagrams usable in Stackedit and Live Editor [#749](https://github.com/knsv/mermaid/pull/749) ([monsterkrampe](https://github.com/monsterkrampe))
+- Adding trapezoid and inverse trapezoid vertex options. [#741](https://github.com/knsv/mermaid/pull/741) ([adamwulf](https://github.com/adamwulf))
+- Add option for right angles [#721](https://github.com/knsv/mermaid/pull/721) ([paulbland](https://github.com/paulbland))
+- Add nested activation classes [#720](https://github.com/knsv/mermaid/pull/720) ([paulbland](https://github.com/paulbland))
+- wip: class diagram cardinality display [#705](https://github.com/knsv/mermaid/pull/705) ([Vrixyz](https://github.com/Vrixyz))
+- add comments about CSS in config [#688](https://github.com/knsv/mermaid/pull/688) ([imma90](https://github.com/imma90))
+- SequenceDiagram: Add support for multiple alt else statements [#641](https://github.com/knsv/mermaid/pull/641) ([sechel](https://github.com/sechel))
+- fix #426 - add class .clickable on nodes with click function or link [#598](https://github.com/knsv/mermaid/pull/598) ([thomasleveil](https://github.com/thomasleveil))
+- Spec fix 1 [#595](https://github.com/knsv/mermaid/pull/595) ([frankschmitt](https://github.com/frankschmitt))

 ## [7.0.5](https://github.com/knsv/mermaid/tree/7.0.5) (2017-09-01)

@ -436,48 +436,48 @@ mermaidAPI.initialize({

 **Closed issues:**

- demos on io site not working [\#466](https://github.com/knsv/mermaid/issues/466)
- Can not be generated PNG pictures through CLI with Chinese [\#451](https://github.com/knsv/mermaid/issues/451)
- Round nodes cannot be styled with CSS classes [\#443](https://github.com/knsv/mermaid/issues/443)
- webpack gulp UglifyJsPlugin error. [\#440](https://github.com/knsv/mermaid/issues/440)
- String concatenation isn't working [\#432](https://github.com/knsv/mermaid/issues/432)
- text flow/wrap in actor box of sequence diagram [\#422](https://github.com/knsv/mermaid/issues/422)
- Online live editor still use old version [\#402](https://github.com/knsv/mermaid/issues/402)
- uncaught TypeError: t.getTransformToElement is not a function [\#401](https://github.com/knsv/mermaid/issues/401)
- Only works when using browserify'd code [\#373](https://github.com/knsv/mermaid/issues/373)
- document the use of shebang line in mmd files [\#364](https://github.com/knsv/mermaid/issues/364)
- Diagrams are small and unreadable in IE 11 - since 0.5.1 [\#356](https://github.com/knsv/mermaid/issues/356)
- \[Feature Request\] ER-Diagram Support [\#354](https://github.com/knsv/mermaid/issues/354)
- The need for mermaid.css should be mentioned explicitly in the intro docs... [\#273](https://github.com/knsv/mermaid/issues/273)
+- demos on io site not working [#466](https://github.com/knsv/mermaid/issues/466)
+- Can not be generated PNG pictures through CLI with Chinese [#451](https://github.com/knsv/mermaid/issues/451)
+- Round nodes cannot be styled with CSS classes [#443](https://github.com/knsv/mermaid/issues/443)
+- webpack gulp UglifyJsPlugin error. [#440](https://github.com/knsv/mermaid/issues/440)
+- String concatenation isn't working [#432](https://github.com/knsv/mermaid/issues/432)
+- text flow/wrap in actor box of sequence diagram [#422](https://github.com/knsv/mermaid/issues/422)
+- Online live editor still use old version [#402](https://github.com/knsv/mermaid/issues/402)
+- uncaught TypeError: t.getTransformToElement is not a function [#401](https://github.com/knsv/mermaid/issues/401)
+- Only works when using browserify'd code [#373](https://github.com/knsv/mermaid/issues/373)
+- document the use of shebang line in mmd files [#364](https://github.com/knsv/mermaid/issues/364)
+- Diagrams are small and unreadable in IE 11 - since 0.5.1 [#356](https://github.com/knsv/mermaid/issues/356)
+- \[Feature Request] ER-Diagram Support [#354](https://github.com/knsv/mermaid/issues/354)
+- The need for mermaid.css should be mentioned explicitly in the intro docs... [#273](https://github.com/knsv/mermaid/issues/273)

 **Merged pull requests:**

- Update index.html [\#465](https://github.com/knsv/mermaid/pull/465) ([bmsleight](https://github.com/bmsleight))
- Fix for \#416, customizing link style with any color sets `fill` property to `black` instead of `none` [\#452](https://github.com/knsv/mermaid/pull/452) ([joshuacolvin](https://github.com/joshuacolvin))
- Allow .node\>circle to receive css styles [\#449](https://github.com/knsv/mermaid/pull/449) ([bfriedz](https://github.com/bfriedz))
- Fix spelling [\#447](https://github.com/knsv/mermaid/pull/447) ([jawn](https://github.com/jawn))
- added tests and fix cli css style selector lowercase problem [\#445](https://github.com/knsv/mermaid/pull/445) ([whyzdev](https://github.com/whyzdev))
- Update d3.js [\#441](https://github.com/knsv/mermaid/pull/441) ([hetz](https://github.com/hetz))
- added tests to reproduce \#434 in flowchart [\#439](https://github.com/knsv/mermaid/pull/439) ([whyzdev](https://github.com/whyzdev))
- Code Climate config [\#437](https://github.com/knsv/mermaid/pull/437) ([larkinscott](https://github.com/larkinscott))
- fix gantt and sequence digram cli cfg [\#435](https://github.com/knsv/mermaid/pull/435) ([whyzdev](https://github.com/whyzdev))
- fix gantt chart cli configuration broken [\#433](https://github.com/knsv/mermaid/pull/433) ([whyzdev](https://github.com/whyzdev))
- fix gantt chart cli configuration parsing including functions [\#430](https://github.com/knsv/mermaid/pull/430) ([whyzdev](https://github.com/whyzdev))
- Uses an empty text node instead of a string for svg group labels [\#429](https://github.com/knsv/mermaid/pull/429) ([daveaglick](https://github.com/daveaglick))
- use tspan via d3.textwrap to place actor text in sequence diagram [\#427](https://github.com/knsv/mermaid/pull/427) ([whyzdev](https://github.com/whyzdev))
- \#422 use foreignObject/div to place actor label in sequence diagram [\#423](https://github.com/knsv/mermaid/pull/423) ([whyzdev](https://github.com/whyzdev))
- Clarify the need for a CSS stylesheet [\#413](https://github.com/knsv/mermaid/pull/413) ([sifb](https://github.com/sifb))
- Added hads downstream project [\#412](https://github.com/knsv/mermaid/pull/412) ([sinedied](https://github.com/sinedied))
- update usage and fix \#273 [\#406](https://github.com/knsv/mermaid/pull/406) ([jinntrance](https://github.com/jinntrance))
- Add https://github.com/raghur/mermaid-filter to downstream projects docs page [\#404](https://github.com/knsv/mermaid/pull/404) ([raghur](https://github.com/raghur))
- New neutral theme [\#395](https://github.com/knsv/mermaid/pull/395) ([sinedied](https://github.com/sinedied))
- fix cli issues [\#390](https://github.com/knsv/mermaid/pull/390) ([ben-page](https://github.com/ben-page))
- Add missing space for 'Labels out of bounds' section [\#386](https://github.com/knsv/mermaid/pull/386) ([The-Alchemist](https://github.com/The-Alchemist))
- Fix typo: `pats` -\> `paths` [\#382](https://github.com/knsv/mermaid/pull/382) ([swhgoon](https://github.com/swhgoon))
- Added class diagram example to README.md [\#379](https://github.com/knsv/mermaid/pull/379) ([HustLion](https://github.com/HustLion))
- override normal flowchart arrowhead to allow css styling [\#376](https://github.com/knsv/mermaid/pull/376) ([dodoinblue](https://github.com/dodoinblue))
- added sphinx extension [\#371](https://github.com/knsv/mermaid/pull/371) ([mgaitan](https://github.com/mgaitan))
- Fix typo in the sequence diagram documentation [\#369](https://github.com/knsv/mermaid/pull/369) ([ggpasqualino](https://github.com/ggpasqualino))
+- Update index.html [#465](https://github.com/knsv/mermaid/pull/465) ([bmsleight](https://github.com/bmsleight))
+- Fix for #416, customizing link style with any color sets `fill` property to `black` instead of `none` [#452](https://github.com/knsv/mermaid/pull/452) ([joshuacolvin](https://github.com/joshuacolvin))
+- Allow .node>circle to receive css styles [#449](https://github.com/knsv/mermaid/pull/449) ([bfriedz](https://github.com/bfriedz))
+- Fix spelling [#447](https://github.com/knsv/mermaid/pull/447) ([jawn](https://github.com/jawn))
+- added tests and fix cli css style selector lowercase problem [#445](https://github.com/knsv/mermaid/pull/445) ([whyzdev](https://github.com/whyzdev))
+- Update d3.js [#441](https://github.com/knsv/mermaid/pull/441) ([hetz](https://github.com/hetz))
+- added tests to reproduce #434 in flowchart [#439](https://github.com/knsv/mermaid/pull/439) ([whyzdev](https://github.com/whyzdev))
+- Code Climate config [#437](https://github.com/knsv/mermaid/pull/437) ([larkinscott](https://github.com/larkinscott))
+- fix gantt and sequence digram cli cfg [#435](https://github.com/knsv/mermaid/pull/435) ([whyzdev](https://github.com/whyzdev))
+- fix gantt chart cli configuration broken [#433](https://github.com/knsv/mermaid/pull/433) ([whyzdev](https://github.com/whyzdev))
+- fix gantt chart cli configuration parsing including functions [#430](https://github.com/knsv/mermaid/pull/430) ([whyzdev](https://github.com/whyzdev))
+- Uses an empty text node instead of a string for svg group labels [#429](https://github.com/knsv/mermaid/pull/429) ([daveaglick](https://github.com/daveaglick))
+- use tspan via d3.textwrap to place actor text in sequence diagram [#427](https://github.com/knsv/mermaid/pull/427) ([whyzdev](https://github.com/whyzdev))
+- \#422 use foreignObject/div to place actor label in sequence diagram [#423](https://github.com/knsv/mermaid/pull/423) ([whyzdev](https://github.com/whyzdev))
+- Clarify the need for a CSS stylesheet [#413](https://github.com/knsv/mermaid/pull/413) ([sifb](https://github.com/sifb))
+- Added hads downstream project [#412](https://github.com/knsv/mermaid/pull/412) ([sinedied](https://github.com/sinedied))
+- update usage and fix #273 [#406](https://github.com/knsv/mermaid/pull/406) ([jinntrance](https://github.com/jinntrance))
+- Add https://github.com/raghur/mermaid-filter to downstream projects docs page [#404](https://github.com/knsv/mermaid/pull/404) ([raghur](https://github.com/raghur))
+- New neutral theme [#395](https://github.com/knsv/mermaid/pull/395) ([sinedied](https://github.com/sinedied))
+- fix cli issues [#390](https://github.com/knsv/mermaid/pull/390) ([ben-page](https://github.com/ben-page))
+- Add missing space for 'Labels out of bounds' section [#386](https://github.com/knsv/mermaid/pull/386) ([The-Alchemist](https://github.com/The-Alchemist))
+- Fix typo: `pats` -> `paths` [#382](https://github.com/knsv/mermaid/pull/382) ([swhgoon](https://github.com/swhgoon))
+- Added class diagram example to README.md [#379](https://github.com/knsv/mermaid/pull/379) ([HustLion](https://github.com/HustLion))
+- override normal flowchart arrowhead to allow css styling [#376](https://github.com/knsv/mermaid/pull/376) ([dodoinblue](https://github.com/dodoinblue))
+- added sphinx extension [#371](https://github.com/knsv/mermaid/pull/371) ([mgaitan](https://github.com/mgaitan))
+- Fix typo in the sequence diagram documentation [#369](https://github.com/knsv/mermaid/pull/369) ([ggpasqualino](https://github.com/ggpasqualino))

 ## [6.0.0](https://github.com/knsv/mermaid/tree/6.0.0) (2016-05-29)

@ -633,40 +633,40 @@ mermaidAPI.initialize({

 **Closed issues:**

- Installing “atom-mermaid@0.1.3” failed [\#218](https://github.com/knsv/mermaid/issues/218)
- node feature request [\#211](https://github.com/knsv/mermaid/issues/211)
- Please add prefix for styles [\#208](https://github.com/knsv/mermaid/issues/208)
- Bad handling of block arguments [\#207](https://github.com/knsv/mermaid/issues/207)
- please consider port to mac osx [\#203](https://github.com/knsv/mermaid/issues/203)
- allow phantomjs \>=1.9.x [\#201](https://github.com/knsv/mermaid/issues/201)
- syntax for venn diagrams? [\#200](https://github.com/knsv/mermaid/issues/200)
- Broken CLI Graphs? \(v0.5.1\) [\#196](https://github.com/knsv/mermaid/issues/196)
- Static site does not render under HTTPS [\#194](https://github.com/knsv/mermaid/issues/194)
- Error on simple graph [\#192](https://github.com/knsv/mermaid/issues/192)
- Escape "~" [\#191](https://github.com/knsv/mermaid/issues/191)
- Trying to add link using 'click' to flowchart [\#188](https://github.com/knsv/mermaid/issues/188)
- cli: no lines and arrowheads rendered / only dotted lines [\#187](https://github.com/knsv/mermaid/issues/187)
- text of mermaid div displayed on page [\#186](https://github.com/knsv/mermaid/issues/186)
- using mermaid with laravel [\#185](https://github.com/knsv/mermaid/issues/185)
- Atom editor package [\#183](https://github.com/knsv/mermaid/issues/183)
- Auto linewrap for notes in sequence diagrams [\#178](https://github.com/knsv/mermaid/issues/178)
- Execute code after initialize [\#176](https://github.com/knsv/mermaid/issues/176)
- Autoscaling for all diagram types [\#175](https://github.com/knsv/mermaid/issues/175)
- Problem wit click event callback [\#174](https://github.com/knsv/mermaid/issues/174)
- How to escape characters? [\#170](https://github.com/knsv/mermaid/issues/170)
- it can not work [\#167](https://github.com/knsv/mermaid/issues/167)
- Broken subgraph using the CLI [\#153](https://github.com/knsv/mermaid/issues/153)
- IE Support issue [\#142](https://github.com/knsv/mermaid/issues/142)
- Flowchart truncated [\#140](https://github.com/knsv/mermaid/issues/140)
- Double Quote as text is not working [\#219](https://github.com/knsv/mermaid/issues/219)
- classDef / class not working with htmlLabels? [\#210](https://github.com/knsv/mermaid/issues/210)
- Links in graph missing [\#209](https://github.com/knsv/mermaid/issues/209)
- Last word in comment boxes getting cut off by word wrap library : \( [\#195](https://github.com/knsv/mermaid/issues/195)
- Escaping characters in sequence diagram [\#193](https://github.com/knsv/mermaid/issues/193)
- SVG foreignObject rendering [\#180](https://github.com/knsv/mermaid/issues/180)
- IE9 issue [\#179](https://github.com/knsv/mermaid/issues/179)
- inoperable in an AMD/requirejs environment: IPython Notebook [\#127](https://github.com/knsv/mermaid/issues/127)
- \[Parser\] Hyphen in participant name bring TypeError [\#74](https://github.com/knsv/mermaid/issues/74)
+- Installing “atom-mermaid@0.1.3” failed [#218](https://github.com/knsv/mermaid/issues/218)
+- node feature request [#211](https://github.com/knsv/mermaid/issues/211)
+- Please add prefix for styles [#208](https://github.com/knsv/mermaid/issues/208)
+- Bad handling of block arguments [#207](https://github.com/knsv/mermaid/issues/207)
+- please consider port to mac osx [#203](https://github.com/knsv/mermaid/issues/203)
+- allow phantomjs >=1.9.x [#201](https://github.com/knsv/mermaid/issues/201)
+- syntax for venn diagrams? [#200](https://github.com/knsv/mermaid/issues/200)
+- Broken CLI Graphs? (v0.5.1) [#196](https://github.com/knsv/mermaid/issues/196)
+- Static site does not render under HTTPS [#194](https://github.com/knsv/mermaid/issues/194)
+- Error on simple graph [#192](https://github.com/knsv/mermaid/issues/192)
+- Escape "~" [#191](https://github.com/knsv/mermaid/issues/191)
+- Trying to add link using 'click' to flowchart [#188](https://github.com/knsv/mermaid/issues/188)
+- cli: no lines and arrowheads rendered / only dotted lines [#187](https://github.com/knsv/mermaid/issues/187)
+- text of mermaid div displayed on page [#186](https://github.com/knsv/mermaid/issues/186)
+- using mermaid with laravel [#185](https://github.com/knsv/mermaid/issues/185)
+- Atom editor package [#183](https://github.com/knsv/mermaid/issues/183)
+- Auto linewrap for notes in sequence diagrams [#178](https://github.com/knsv/mermaid/issues/178)
+- Execute code after initialize [#176](https://github.com/knsv/mermaid/issues/176)
+- Autoscaling for all diagram types [#175](https://github.com/knsv/mermaid/issues/175)
+- Problem wit click event callback [#174](https://github.com/knsv/mermaid/issues/174)
+- How to escape characters? [#170](https://github.com/knsv/mermaid/issues/170)
+- it can not work [#167](https://github.com/knsv/mermaid/issues/167)
+- Broken subgraph using the CLI [#153](https://github.com/knsv/mermaid/issues/153)
+- IE Support issue [#142](https://github.com/knsv/mermaid/issues/142)
+- Flowchart truncated [#140](https://github.com/knsv/mermaid/issues/140)
+- Double Quote as text is not working [#219](https://github.com/knsv/mermaid/issues/219)
+- classDef / class not working with htmlLabels? [#210](https://github.com/knsv/mermaid/issues/210)
+- Links in graph missing [#209](https://github.com/knsv/mermaid/issues/209)
+- Last word in comment boxes getting cut off by word wrap library : ( [#195](https://github.com/knsv/mermaid/issues/195)
+- Escaping characters in sequence diagram [#193](https://github.com/knsv/mermaid/issues/193)
+- SVG foreignObject rendering [#180](https://github.com/knsv/mermaid/issues/180)
+- IE9 issue [#179](https://github.com/knsv/mermaid/issues/179)
+- inoperable in an AMD/requirejs environment: IPython Notebook [#127](https://github.com/knsv/mermaid/issues/127)
+- \[Parser] Hyphen in participant name bring TypeError [#74](https://github.com/knsv/mermaid/issues/74)

 **Merged pull requests:**

@ -912,12 +912,12 @@ mermaidAPI.initialize({

 **Merged pull requests:**

- New grammar will allow statements ending without semicolon as disccused in Issue \#38 [\#63](https://github.com/knsv/mermaid/pull/63) ([vijay40](https://github.com/vijay40))
- Class based styling [\#62](https://github.com/knsv/mermaid/pull/62) ([bjowes](https://github.com/bjowes))
- Fix typos [\#60](https://github.com/knsv/mermaid/pull/60) ([sublimino](https://github.com/sublimino))
- Included .DS_Store in gitignore [\#57](https://github.com/knsv/mermaid/pull/57) ([alvynmcq](https://github.com/alvynmcq))
- Improves readability discussed in issue \#38 [\#56](https://github.com/knsv/mermaid/pull/56) ([vijay40](https://github.com/vijay40))
- Added a linting task for gulp [\#43](https://github.com/knsv/mermaid/pull/43) ([serv](https://github.com/serv))
+- New grammar will allow statements ending without semicolon as disccused in Issue #38 [#63](https://github.com/knsv/mermaid/pull/63) ([vijay40](https://github.com/vijay40))
+- Class based styling [#62](https://github.com/knsv/mermaid/pull/62) ([bjowes](https://github.com/bjowes))
+- Fix typos [#60](https://github.com/knsv/mermaid/pull/60) ([sublimino](https://github.com/sublimino))
+- Included .DS_Store in gitignore [#57](https://github.com/knsv/mermaid/pull/57) ([alvynmcq](https://github.com/alvynmcq))
+- Improves readability discussed in issue #38 [#56](https://github.com/knsv/mermaid/pull/56) ([vijay40](https://github.com/vijay40))
+- Added a linting task for gulp [#43](https://github.com/knsv/mermaid/pull/43) ([serv](https://github.com/serv))

 ## [0.2.15](https://github.com/knsv/mermaid/tree/0.2.15) (2014-12-05)

@ -936,8 +936,8 @@ mermaidAPI.initialize({

 **Merged pull requests:**

- Include bower_components/ to .gitignore [\#33](https://github.com/knsv/mermaid/pull/33) ([serv](https://github.com/serv))
- Fixed reference to Git repo. [\#32](https://github.com/knsv/mermaid/pull/32) ([guyellis](https://github.com/guyellis))
+- Include bower_components/ to .gitignore [#33](https://github.com/knsv/mermaid/pull/33) ([serv](https://github.com/serv))
+- Fixed reference to Git repo. [#32](https://github.com/knsv/mermaid/pull/32) ([guyellis](https://github.com/guyellis))

 ## [0.2.14](https://github.com/knsv/mermaid/tree/0.2.14) (2014-12-03)

--- a/docs/Configuration.md
+++ b/docs/Configuration.md
@ -13,7 +13,7 @@ The Following are the most commonly used methods, and are all tied to Mermaid [D

 ## [Directives](./directives.md),

-allows the limited reconfiguration of a diagram just before it is rendered. It can alter the font style, color and other aesthetic aspects of the diagram. you can pass a directive alongside your definition inside `%%{ }%%`, either above or below your diagram definition.
+Directives allows limited reconfiguration of a diagram just before it is rendered. It can alter the font style, color and other aesthetic aspects of the diagram. You can pass a directive alongside your definition inside `%%{ }%%`, either above or below your diagram definition.

 ## Theme Creation:

--- a/docs/README.md
+++ b/docs/README.md
@ -24,8 +24,7 @@ Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-i

 Diagramming and documentation costs precious developer time and gets outdated quickly.
 But not having diagrams or docs ruins productivity and hurts organizational learning.<br/>
-Mermaid addresses this problem by enabling users to create easily modifiable diagrams, it can also be made part of production scripts (and other pieces of code).<br/>
-<br/>
+Mermaid addresses this problem by enabling users to create easily modifiable diagrams, it can also be made part of production scripts (and other pieces of code).<br/> <br/>
 Mermaid allows even non-programmers to easily create detailed and diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
 [Tutorials](./Tutorials.md) has video tutorials.
 Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./integrations.md).
@ -192,11 +191,11 @@ Latest Version: <https://unpkg.com/browse/mermaid@8.8.0/>

 To Deploy Mermaid:

-1. You will need to install node v16, which would have npm
-2. Download yarn using npm
-3. Enter the following command: `yarn add mermaid`
-4. You can then add mermaid as a dev dependency using this command:
-   `yarn add --dev mermaid`
+1.  You will need to install node v16, which would have npm
+2.  Download yarn using npm
+3.  Enter the following command: `yarn add mermaid`
+4.  You can then add mermaid as a dev dependency using this command:
+    `yarn add --dev mermaid`

 ### [Mermaid API](./Setup.md):

--- a/docs/_navbar.md
+++ b/docs/_navbar.md
@ -1,3 +1,5 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+
 - Getting started

  - [Quick start](quickstart.md)
--- a/docs/accessibility.md
+++ b/docs/accessibility.md
@ -4,12 +4,12 @@

 ## Accessibility

-Now with Mermaid library is in much wider use, we have started to work towwards more accessible features, based on the feedback from the community.
-
 Now with Mermaid library in much wider use, we have started to work towards more accessible features, based on the feedback from the community.

 To begin with, we have added a new feature to Mermaid library, which is to support accessibility options, **Accessibility Title** and **Accessibility Description**.

+This support for accessibility options is available for all the diagrams/chart types. Also, we have tired to keep the same format for the accessibility options, so that it is easy to understand and maintain.
+
 ## Defining Accessibility Options

 ### Single line accessibility values
@ -33,13 +33,23 @@ Let us take a look at the following example with a flowchart diagram:

 ```

+```mermaid
+   graph LR
+      accTitle: Big decisions
+      accDescr: Flow chart of the decision making process
+      A[Hard] -->|Text| B(Round)
+      B --> C{Decision}
+      C -->|One| D[Result 1]
+
+```
+
 See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code:

 ![Accessibility options rendered inside SVG](img/accessibility-div-example.png)

 ### Multi-line Accessibility title/description

-You can also define the accessibility options in a multi-line format, where the keyword is followed by opening curly bracket `{` and then mutltile lines, followed by a closing `}`.
+You can also define the accessibility options in a multi-line format, where the keyword is followed by opening curly bracket `{` and then multiple lines, followed by a closing `}`.

 `accTitle: My single line title value` (**_single line format_**)

@ -64,6 +74,21 @@ Let us look at it in the following example, with same flowchart:

 ```

+```mermaid
+   graph LR
+      accTitle: Big decisions
+
+      accDescr {
+        My multi-line description
+        of the diagram
+      }
+
+      A[Hard] -->|Text| B(Round)
+      B --> C{Decision}
+      C -->|One| D[Result 1]
+
+```
+
 See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code:

 ![Accessibility options rendered inside SVG](img/accessibility-div-example-2.png)
@ -172,6 +197,22 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the

 ```

+```mermaid
+  journey
+      accTitle: My User Journey Diagram
+      accDescr: My User Journey Diagram Description
+
+      title My working day
+      section Go to work
+        Make tea: 5: Me
+        Go upstairs: 3: Me
+        Do work: 1: Me, Cat
+      section Go home
+        Go downstairs: 5: Me
+        Sit down: 5: Me
+
+```
+
 #### Gantt Chart

 ```mermaid-example
@ -221,6 +262,19 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the

 ```

+```mermaid
+   pie
+      accTitle: My Pie Chart Accessibility Title
+      accDescr: My Pie Chart Accessibility Description
+
+    title Key elements in Product X
+    "Calcium" : 42.96
+    "Potassium" : 50.05
+    "Magnesium" : 10.01
+    "Iron" :  5
+
+```
+
 #### Requirement Diagram

 ```mermaid-example
@ -243,13 +297,27 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the

 ```

-       requirement test_req {
+```mermaid
+  requirementDiagram
+      accTitle: My Requirement Diagram
+      accDescr: My Requirement Diagram Description

-id: 1
-text: the test text.
-risk: high
-verifymethod: test
-}
+       requirement test_req {
+  id: 1
+  text: the test text.
+  risk: high
+  verifymethod: test
+  }
+
+  element test_entity {
+  type: simulation
+  }
+
+  test_entity - satisfies -> test_req
+
+```
+
+#### Gitgraph

 ```mermaid-example
  gitGraph
@ -268,3 +336,21 @@ verifymethod: test
     commit

 ```
+
+```mermaid
+  gitGraph
+      accTitle: My Gitgraph Accessibility Title
+      accDescr: My Gitgraph Accessibility Description
+
+     commit
+     commit
+     branch develop
+     checkout develop
+     commit
+     commit
+     checkout main
+     merge develop
+     commit
+     commit
+
+```
--- a/docs/c4c.md
+++ b/docs/c4c.md
@ -2,8 +2,6 @@

 # C4 Diagrams

-**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/gitgraph.md)
-
 > C4 Diagram: This is an experimental diagram for now. The syntax and properties can change in future releases. Proper documentation will be provided when the syntax is stable.

 Mermaid's c4 diagram syntax is compatible with plantUML. See example below:
@ -53,6 +51,53 @@ Mermaid's c4 diagram syntax is compatible with plantUML. See example below:
      UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")


+```
+
+```mermaid
+    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, <br/> 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")
+
+
 ```

 For an example, see the source code demos/index.html
@ -81,71 +126,121 @@ The number of shapes per row and the number of boundaries can be adjusted using

 The following unfinished features are not supported in the short term.

- [ ] sprite
- [ ] tags
- [ ] link
- [ ] Legend
+- \[ ] sprite

- [x] System Context
- - [x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
- - [x] Person_Ext
- - [x] System(alias, label, ?descr, ?sprite, ?tags, $link)
- - [x] SystemDb
- - [x] SystemQueue
- - [x] System_Ext
- - [x] SystemDb_Ext
- - [x] SystemQueue_Ext
- - [x] Boundary(alias, label, ?type, ?tags, $link)
- - [x] Enterprise_Boundary(alias, label, ?tags, $link)
- - [x] System_Boundary
+- \[ ] tags

- [x] Container diagram
- - [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
- - [x] ContainerDb
- - [x] ContainerQueue
- - [x] Container_Ext
- - [x] ContainerDb_Ext
- - [x] ContainerQueue_Ext
- - [x] Container_Boundary(alias, label, ?tags, $link)
+- \[ ] link

- [x] Component diagram
- - [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
- - [x] ComponentDb
- - [x] ComponentQueue
- - [x] Component_Ext
- - [x] ComponentDb_Ext
- - [x] ComponentQueue_Ext
+- \[ ] Legend

- [x] Dynamic diagram
- - [x] RelIndex(index, from, to, label, ?tags, $link)
+- \[x] System Context

- [x] Deployment diagram
- - [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
- - [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
- - [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
- - [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
+- - \[x] Person(alias, label, ?descr, ?sprite, ?tags, $link)

- [x] Relationship Types
- - [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
- - [x] BiRel (bidirectional relationship)
- - [x] Rel_U, Rel_Up
- - [x] Rel_D, Rel_Down
- - [x] Rel_L, Rel_Left
- - [x] Rel_R, Rel_Right
- - [x] Rel_Back
- - [x] RelIndex \* Compatible with C4-Plantuml syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written.
+- - \[x] Person_Ext

- [ ] Custom tags/stereotypes support and skinparam updates
- - [ ] AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend.
- - [ ] AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new Relationship tag. The styles of the tagged relationships are updated and the tag is displayed in the calculated legend.
- - [x] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): This call updates the default style of the elements (component, ...) and creates no additional legend entry.
- - [x] UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): This call updates the default relationship colors and creates no additional legend entry. Two new parameters, offsetX and offsetY, are added to set the offset of the original position of the text.
- - [ ] RoundedBoxShape(): This call returns the name of the rounded box shape and can be used as ?shape argument.
- - [ ] EightSidedShape(): This call returns the name of the eight sided shape and can be used as ?shape argument.
- - [ ] DashedLine(): This call returns the name of the dashed line and can be used as ?lineStyle argument.
- - [ ] DottedLine(): This call returns the name of the dotted line and can be used as ?lineStyle argument.
- - [ ] BoldLine(): This call returns the name of the bold line and can be used as ?lineStyle argument.
- - [x] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and c4BoundaryInRow(2).
+- - \[x] System(alias, label, ?descr, ?sprite, ?tags, $link)
+
+- - \[x] SystemDb
+
+- - \[x] SystemQueue
+
+- - \[x] System_Ext
+
+- - \[x] SystemDb_Ext
+
+- - \[x] SystemQueue_Ext
+
+- - \[x] Boundary(alias, label, ?type, ?tags, $link)
+
+- - \[x] Enterprise_Boundary(alias, label, ?tags, $link)
+
+- - \[x] System_Boundary
+
+- \[x] Container diagram
+
+- - \[x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
+
+- - \[x] ContainerDb
+
+- - \[x] ContainerQueue
+
+- - \[x] Container_Ext
+
+- - \[x] ContainerDb_Ext
+
+- - \[x] ContainerQueue_Ext
+
+- - \[x] Container_Boundary(alias, label, ?tags, $link)
+
+- \[x] Component diagram
+
+- - \[x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
+
+- - \[x] ComponentDb
+
+- - \[x] ComponentQueue
+
+- - \[x] Component_Ext
+
+- - \[x] ComponentDb_Ext
+
+- - \[x] ComponentQueue_Ext
+
+- \[x] Dynamic diagram
+
+- - \[x] RelIndex(index, from, to, label, ?tags, $link)
+
+- \[x] Deployment diagram
+
+- - \[x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
+
+- - \[x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
+
+- - \[x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
+
+- - \[x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
+
+- \[x] Relationship Types
+
+- - \[x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
+
+- - \[x] BiRel (bidirectional relationship)
+
+- - \[x] Rel_U, Rel_Up
+
+- - \[x] Rel_D, Rel_Down
+
+- - \[x] Rel_L, Rel_Left
+
+- - \[x] Rel_R, Rel_Right
+
+- - \[x] Rel_Back
+
+- - \[x] RelIndex \* Compatible with C4-Plantuml syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written.
+
+- \[ ] Custom tags/stereotypes support and skinparam updates
+
+- - \[ ] AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend.
+
+- - \[ ] AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new Relationship tag. The styles of the tagged relationships are updated and the tag is displayed in the calculated legend.
+
+- - \[x] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): This call updates the default style of the elements (component, ...) and creates no additional legend entry.
+
+- - \[x] UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): This call updates the default relationship colors and creates no additional legend entry. Two new parameters, offsetX and offsetY, are added to set the offset of the original position of the text.
+
+- - \[ ] RoundedBoxShape(): This call returns the name of the rounded box shape and can be used as ?shape argument.
+
+- - \[ ] EightSidedShape(): This call returns the name of the eight sided shape and can be used as ?shape argument.
+
+- - \[ ] DashedLine(): This call returns the name of the dashed line and can be used as ?lineStyle argument.
+
+- - \[ ] DottedLine(): This call returns the name of the dotted line and can be used as ?lineStyle argument.
+
+- - \[ ] BoldLine(): This call returns the name of the bold line and can be used as ?lineStyle argument.
+
+- - \[x] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and c4BoundaryInRow(2).

 There are two ways to assign parameters with question marks. One uses the non-named parameter assignment method in the order of the parameters, and the other uses the named parameter assignment method, where the name must start with a $ symbol.

@ -206,6 +301,52 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")

 ```

+```mermaid
+    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, <br/> 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")
+
+```
+
 ## C4 Container diagram (C4Container)

 ```mermaid-example
@ -248,6 +389,46 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")

 ```

+```mermaid
+    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 cutomers 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")
+
+```
+
 ## C4 Component diagram (C4Component)

 ```mermaid-example
@ -290,6 +471,46 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")

 ```

+```mermaid
+    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")
+
+```
+
 ## C4 Dynamic diagram (C4Dynamic)

 ```mermaid-example
--- a/docs/classDiagram.md
+++ b/docs/classDiagram.md
@ -500,17 +500,33 @@ classDiagram
  Student "1" --o "1" Bike : rides
 ```

+```mermaid
+classDiagram
+  direction RL
+  class Student {
+    -idCard : IdCard
+  }
+  class IdCard{
+    -id : int
+    -name : string
+  }
+  class Bike{
+    -id : int
+    -name : string
+  }
+  Student "1" --o "1" IdCard : carries
+  Student "1" --o "1" Bike : rides
+```
+
 ## Interaction

 It is possible to bind a click event to a node. The click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.

 You would define these actions on a separate line after all classes have been declared.

-```
-action className "reference" "tooltip"
-click className call callback() "tooltip"
-click className href "url" "tooltip"
-```
+    action className "reference" "tooltip"
+    click className call callback() "tooltip"
+    click className href "url" "tooltip"

 - _action_ is either `link` or `callback`, depending on which type of interaction you want to have called
 - _className_ is the id of the node that the action will be associated with
--- a/docs/development.md
+++ b/docs/development.md
@ -28,7 +28,7 @@ We make all changes via Pull Requests. As we have many Pull Requests from develo

 - Large changes reviewed by knsv or other developer asked to review by knsv
 - Smaller, low-risk changes like dependencies, documentation, etc. can be merged by active collaborators
- Documentation (we encourage updates to the docs folder; you can submit them via direct commits)
+- Documentation (we encourage updates to the `src/docs` folder; you can submit them via direct commits)

 When you commit code, create a branch with the following naming convention:

@ -72,9 +72,9 @@ This tests the rendering and visual appearance of the diagrams. This ensures tha

 To start working with the e2e tests:

-1. Run `yarn dev` to start the dev server
-2. 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`).
+1.  Run `yarn dev` to start the dev server
+2.  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`).

 The rendering tests are very straightforward to create. There is a function `imgSnapshotTest`, which takes a diagram in text form and the mermaid options, and it renders that diagram in Cypress.

--- a/docs/diagrams-and-syntax-and-examples/flowchart.md
+++ b/docs/diagrams-and-syntax-and-examples/flowchart.md
@ -154,6 +154,11 @@ graph LR
    id1>This is the text in the box]
 ```

+```mermaid
+graph LR
+    id1>This is the text in the box]
+```
+
 Currently it is only possible to render the shape above, and not its mirror. _This might change with future releases._

 ### A node (rhombus)
@ -187,6 +192,11 @@ graph TD
    id1[/This is the text in the box/]
 ```

+```mermaid
+graph TD
+    id1[/This is the text in the box/]
+```
+
 ### Parallelogram alt

 ```mermaid-example
@ -206,6 +216,11 @@ graph TD
    A[/Christmas\]
 ```

+```mermaid
+graph TD
+    A[/Christmas\]
+```
+
 ### Trapezoid alt

 ```mermaid-example
@ -375,6 +390,11 @@ graph TB
    A & B--> C & D
 ```

+```mermaid
+graph TB
+    A & B--> C & D
+```
+
 If you describe the same diagram using the the basic syntax, it will take four lines:

 ```mmd
@ -539,6 +559,20 @@ graph TB
    end
 ```

+```mermaid
+graph TB
+    c1-->a2
+    subgraph one
+    a1-->a2
+    end
+    subgraph two
+    b1-->b2
+    end
+    subgraph three
+    c1-->c2
+    end
+```
+
 You can also set an explicit id for the subgraph:

 ```mermaid-example
@ -549,6 +583,14 @@ graph TB
    end
 ```

+```mermaid
+graph TB
+    c1-->a2
+    subgraph ide1 [one]
+    a1-->a2
+    end
+```
+
 ## Flowcharts

 With the graphtype `flowchart` it is also possible to set edges to and from subgraphs:
@ -570,6 +612,23 @@ flowchart TB
    two --> c2
 ```

+```mermaid
+flowchart TB
+    c1-->a2
+    subgraph one
+    a1-->a2
+    end
+    subgraph two
+    b1-->b2
+    end
+    subgraph three
+    c1-->c2
+    end
+    one --> two
+    three --> two
+    two --> c2
+```
+
 ## Interaction

 A node can have click events bound that lead to either a JavaScript callback or to open a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
@ -603,6 +662,17 @@ graph LR;
    click B href "https://www.github.com" "This is a tooltip for a link"
 ```

+```mermaid
+graph LR;
+    A-->B;
+    B-->C;
+    C-->D;
+    click A callback "Tooltip for a callback"
+    click B "https://www.github.com" "This is a tooltip for a link"
+    click A call callback() "Tooltip for a callback"
+    click B href "https://www.github.com" "This is a tooltip for a link"
+```
+
 > **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.

 ?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/s37cjoau/3/).
@ -712,6 +782,13 @@ graph LR
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
 ```

+```mermaid
+graph LR
+    id1(Start)-->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+```
+
 #### Classes

 More convenient than defining the style every time is to define a class of styles and attach this class reference to multiple nodes.
@ -736,6 +813,12 @@ graph LR
    classDef someclass fill:#f96;
 ```

+```mermaid
+graph LR
+    A:::someclass --> B
+    classDef someclass fill:#f96;
+```
+
 ### Css classes

 It is also possible to predefine classes in css styles that can be applied from the graph definition:
@ -759,13 +842,18 @@ graph LR;
    class A cssClass;
 ```

+```mermaid
+graph LR;
+    A-->B[AAA<span>BBB</span>];
+    B-->D;
+    class A cssClass;
+```
+
 ### Default class

 If a class is named `default` it will be assigned to all nodes that do not have a specific class definition.

-```
-    classDef default fill:#f9f,stroke:#333,stroke-width:4px;
-```
+        classDef default fill:#f9f,stroke:#333,stroke-width:4px;

 ## Basic support for fontawesome

@ -779,6 +867,14 @@ graph TD
    B-->E(A fa:fa-camera-retro perhaps?);
 ```

+```mermaid
+graph TD
+    B["fa:fa-twitter for peace"]
+    B-->C[fa:fa-ban forbidden]
+    B-->D(fa:fa-spinner);
+    B-->E(A fa:fa-camera-retro perhaps?);
+```
+
 ## Graph declarations with spaces between vertices and link and without semicolon

 - After release 0.2.16, graph declaration statements do not need to end with a semicolon. (And they can continue to have the ending semicolon—it has now just become optional.) So the below graph declaration is valid along with the old declarations.
@ -795,6 +891,14 @@ graph LR
    C -->|Two| E[Result two]
 ```

+```mermaid
+graph LR
+    A[Hard edge] -->|Link text| B(Round edge)
+    B --> C{Decision}
+    C -->|One| D[Result one]
+    C -->|Two| E[Result two]
+```
+
 ## Configuration...

 Is it possible to adjust the width of the rendered flowchart.
--- a/docs/directives.md
+++ b/docs/directives.md
@ -14,7 +14,7 @@ While directives allow you to change most of the default configuration settings,

 Mermaid basically supports two types of configuration options to be overridden by directives.

-1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are:
+1.  _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are:

 - theme
 - fontFamily
@ -23,15 +23,12 @@ Mermaid basically supports two types of configuration options to be overridden b
 - startOnLoad
 - secure

-2. _Diagram specific configurations_ : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves.
-   For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alter whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type.
+2.  _Diagram specific configurations_ : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves.
+    For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alter whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type.

 **NOTE:** These options listed here are not all the configuration options. To get hold of all the configuration options, please refer to the [defaultConfig.js](https://github.com/mermaid-js/mermaid/blob/develop/src/defaultConfig.js) in the source code.

-```
-Soon we plan to publish a complete list of top-level configurations & all the diagram specific configurations,
-with their possible values in the docs
-```
+    Soon we plan to publish a complete list of top-level configurations & all the diagram specific configurations, with their possible values in the docs

 ## Declaring directives

@ -42,34 +39,28 @@ Here the structure of a directive text is like a nested key-value pair map or a

 Following code snippet shows the structure of a directive:

-```
-%%{
-  init: {
-    "theme": "dark",
-    "fontFamily": "monospace",
-    "logLevel": "info",
-    "flowchart": {
-      "htmlLabels": true,
-      "curve": "linear"
-    },
-    "sequence": {
-      "mirrorActors": true
-    }
-  }
-}%%
-```
+    %%{
+      init: {
+        "theme": "dark",
+        "fontFamily": "monospace",
+        "logLevel": "info",
+        "flowchart": {
+          "htmlLabels": true,
+          "curve": "linear"
+        },
+        "sequence": {
+          "mirrorActors": true
+        }
+      }
+    }%%

 You can also define the directives in a single line, like this:

-```
-%%{init: { **insert argument here**}}%%
-```
+    %%{init: { **insert argument here**}}%%

 For example, the following code snippet:

-```
-%%{init: { "sequence": { "mirrorActors":false }}}%%
-```
+    %%{init: { "sequence": { "mirrorActors":false }}}%%

 **Notes:**
 The json object that is passed as {**argument** } must be valid key value pairs and encased in quotation marks or it will be ignored.
@ -252,6 +243,17 @@ A --> C[End]
  end
 ```

+```mermaid
+%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%
+graph TD
+A(Forest) --> B[/Another/]
+A --> C[End]
+  subgraph section
+  B
+  C
+  end
+```
+
 ### Changing Sequence diagram config via directive

 Some common sequence configurations are:
@ -306,3 +308,12 @@ Bob->Alice: Fine, How did you mother like the book I suggested? And did you catc
 Alice->Bob: Good.
 Bob->Alice: Cool
 ```
+
+```mermaid
+%%{init: { "sequence": { "wrap": true, "width":300 } } }%%
+sequenceDiagram
+Alice->Bob: Hello Bob, how are you?
+Bob->Alice: Fine, How did you mother like the book I suggested? And did you catch with the new book about alien invasion?
+Alice->Bob: Good.
+Bob->Alice: Cool
+```
--- a/docs/entityRelationshipDiagram.md
+++ b/docs/entityRelationshipDiagram.md
@ -2,8 +2,6 @@

 # Entity Relationship Diagrams

-**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/entityRelationshipDiagram.md)
-
 > An entity–relationship model (or ER model) describes interrelated things of interest in a specific domain of knowledge. A basic ER model is composed of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types). Wikipedia.

 Note that practitioners of ER modelling almost always refer to _entity types_ simply as _entities_. For example the `CUSTOMER` entity _type_ would be referred to simply as the `CUSTOMER` entity. This is so common it would be inadvisable to do anything else, but technically an entity is an abstract _instance_ of an entity type, and this is what an ER diagram shows - abstract instances, and the relationships between them. This is why entities are always named using singular nouns.
@ -50,6 +48,26 @@ erDiagram
    }
 ```

+```mermaid
+erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    CUSTOMER {
+        string name
+        string custNumber
+        string sector
+    }
+    ORDER ||--|{ LINE-ITEM : contains
+    ORDER {
+        int orderNumber
+        string deliveryAddress
+    }
+    LINE-ITEM {
+        string productCode
+        int quantity
+        float pricePerUnit
+    }
+```
+
 When including attributes on ER diagrams, you must decide whether to include foreign keys as attributes. This probably depends on how closely you are trying to represent relational table structures. If your diagram is a _logical_ model which is not meant to imply a relational implementation, then it is better to leave these out because the associative relationships already convey the way that entities are associated. For example, a JSON data structure can implement a one-to-many relationship without the need for foreign key properties, using arrays. Similarly an object-oriented programming language may use pointers or references to collections. Even for models that are intended for relational implementation, you might decide that inclusion of foreign key attributes duplicates information already portrayed by the relationships, and does not add meaning to entities. Ultimately, it's your choice.

 ## Syntax
@ -122,6 +140,22 @@ erDiagram
    }
 ```

+```mermaid
+erDiagram
+    CAR ||--o{ NAMED-DRIVER : allows
+    CAR {
+        string registrationNumber
+        string make
+        string model
+    }
+    PERSON ||--o{ NAMED-DRIVER : is
+    PERSON {
+        string firstName
+        string lastName
+        int age
+    }
+```
+
 The attributes are rendered inside the entity boxes:

 ```mermaid-example
@ -140,6 +174,22 @@ erDiagram
    }
 ```

+```mermaid
+erDiagram
+    CAR ||--o{ NAMED-DRIVER : allows
+    CAR {
+        string registrationNumber
+        string make
+        string model
+    }
+    PERSON ||--o{ NAMED-DRIVER : is
+    PERSON {
+        string firstName
+        string lastName
+        int age
+    }
+```
+
 The `type` and `name` values must begin with an alphabetic character and may contain digits, hyphens or underscores. Other than that, there are no restrictions, and there is no implicit set of valid data types.

 #### Attribute Keys and Comments
--- a/docs/examples.md
+++ b/docs/examples.md
@ -16,6 +16,12 @@ pie title NETFLIX
         "Time spent watching it" : 10
 ```

+```mermaid
+pie title NETFLIX
+         "Time spent looking for movie" : 90
+         "Time spent watching it" : 10
+```
+
 ```mermaid-example
 pie title What Voldemort doesn't have?
         "FRIENDS" : 2
@ -23,6 +29,13 @@ pie title What Voldemort doesn't have?
         "NOSE" : 45
 ```

+```mermaid
+pie title What Voldemort doesn't have?
+         "FRIENDS" : 2
+         "FAMILY" : 3
+         "NOSE" : 45
+```
+
 ## Basic sequence diagram

 ```mermaid-example
@ -59,6 +72,14 @@ graph LR
    C --> D
 ```

+```mermaid
+graph LR
+    A[Square Rect] -- Link text --> B((Circle))
+    A --> C(Round Rect)
+    B --> D{Rhombus}
+    C --> D
+```
+
 ## Larger flowchart with some styling

 ```mermaid-example
@ -85,6 +106,30 @@ graph TB
     class di orange
 ```

+```mermaid
+graph TB
+    sq[Square shape] --> ci((Circle shape))
+
+    subgraph A
+        od>Odd shape]-- Two line<br/>edge comment --> ro
+        di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
+        di==>ro2(Rounded square shape)
+    end
+
+    %% Notice that no text in shape are added here instead that is appended further down
+    e --> od3>Really long text with linebreak<br>in an Odd shape]
+
+    %% Comments after double percent signs
+    e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
+
+    cyr[Cyrillic]-->cyr2((Circle shape Начало));
+
+     classDef green fill:#9f6,stroke:#333,stroke-width:2px;
+     classDef orange fill:#f96,stroke:#333,stroke-width:4px;
+     class sq,e green
+     class di orange
+```
+
 ## SequenceDiagram: Loops, alt and opt

 ```mermaid-example
@ -103,6 +148,22 @@ sequenceDiagram
    end
 ```

+```mermaid
+sequenceDiagram
+    loop Daily query
+        Alice->>Bob: Hello Bob, how are you?
+        alt is sick
+            Bob->>Alice: Not so good :(
+        else is well
+            Bob->>Alice: Feeling fresh like a daisy
+        end
+
+        opt Extra response
+            Bob->>Alice: Thanks for asking
+        end
+    end
+```
+
 ## SequenceDiagram: Message to self in loop

 ```mermaid-example
@ -201,6 +262,22 @@ sequenceDiagram

 ## A commit flow diagram.

+```mermaid-example
+gitGraph:
+    commit "Ashish"
+    branch newbranch
+    checkout newbranch
+    commit id:"1111"
+    commit tag:"test"
+    checkout main
+    commit type: HIGHLIGHT
+    commit
+    merge newbranch
+    commit
+    branch b2
+    commit
+```
+
 ```mermaid
 gitGraph:
    commit "Ashish"
--- a/docs/flowchart.md
+++ b/docs/flowchart.md
@ -145,6 +145,11 @@ flowchart LR
    id1>This is the text in the box]
 ```

+```mermaid
+flowchart LR
+    id1>This is the text in the box]
+```
+
 Currently only the shape above is possible and not its mirror. _This might change with future releases._

 ### A node (rhombus)
@ -202,6 +207,11 @@ flowchart TD
    A[/Christmas\]
 ```

+```mermaid
+flowchart TD
+    A[/Christmas\]
+```
+
 ### Trapezoid alt

 ```mermaid-example
@ -383,6 +393,11 @@ flowchart TB
    A & B--> C & D
 ```

+```mermaid
+flowchart TB
+    A & B--> C & D
+```
+
 If you describe the same diagram using the the basic syntax, it will take four lines. A
 word of warning, one could go overboard with this making the flowchart harder to read in
 markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little.
@ -406,6 +421,12 @@ flowchart LR
    B --x C
 ```

+```mermaid
+flowchart LR
+    A --o B
+    B --x C
+```
+
 ### Multi directional arrows

 There is the possibility to use multidirectional arrows.
@ -542,6 +563,20 @@ flowchart TB
    end
 ```

+```mermaid
+flowchart TB
+    c1-->a2
+    subgraph one
+    a1-->a2
+    end
+    subgraph two
+    b1-->b2
+    end
+    subgraph three
+    c1-->c2
+    end
+```
+
 You can also set an explicit id for the subgraph.

 ```mermaid-example
@ -552,6 +587,14 @@ flowchart TB
    end
 ```

+```mermaid
+flowchart TB
+    c1-->a2
+    subgraph ide1 [one]
+    a1-->a2
+    end
+```
+
 ## flowcharts

 With the graphtype flowchart it is also possible to set edges to and from subgraphs as in the flowchart below.
@ -573,6 +616,23 @@ flowchart TB
    two --> c2
 ```

+```mermaid
+flowchart TB
+    c1-->a2
+    subgraph one
+    a1-->a2
+    end
+    subgraph two
+    b1-->b2
+    end
+    subgraph three
+    c1-->c2
+    end
+    one --> two
+    three --> two
+    two --> c2
+```
+
 ## Direction in subgraphs

 With the graphtype flowcharts you can use the direction statement to set the direction which the subgraph will render like in this example.
@ -594,6 +654,23 @@ flowchart LR
  B1 --> B2
 ```

+```mermaid
+flowchart LR
+  subgraph TOP
+    direction TB
+    subgraph B1
+        direction RL
+        i1 -->f1
+    end
+    subgraph B2
+        direction BT
+        i2 -->f2
+    end
+  end
+  A --> TOP --> B
+  B1 --> B2
+```
+
 ## Interaction

 It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
@ -744,6 +821,13 @@ flowchart LR
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
 ```

+```mermaid
+flowchart LR
+    id1(Start)-->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+```
+
 #### Classes

 More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that
@ -751,9 +835,7 @@ should have a different look.

 a class definition looks like the example below:

-```
-    classDef className fill:#f9f,stroke:#333,stroke-width:4px;
-```
+        classDef className fill:#f9f,stroke:#333,stroke-width:4px;

 Attachment of a class to a node is done as per below:

@ -771,6 +853,12 @@ flowchart LR
    classDef someclass fill:#f96;
 ```

+```mermaid
+flowchart LR
+    A:::someclass --> B
+    classDef someclass fill:#f96;
+```
+
 ### Css classes

 It is also possible to predefine classes in css styles that can be applied from the graph definition as in the example
@ -797,13 +885,18 @@ flowchart LR;
    class A cssClass
 ```

+```mermaid
+flowchart LR;
+    A-->B[AAA<span>BBB</span>]
+    B-->D
+    class A cssClass
+```
+
 ### Default class

 If a class is named default it will be assigned to all classes without specific class definitions.

-```
-    classDef default fill:#f9f,stroke:#333,stroke-width:4px;
-```
+        classDef default fill:#f9f,stroke:#333,stroke-width:4px;

 ## Basic support for fontawesome

@ -827,6 +920,8 @@ flowchart TD
    B-->E(A fa:fa-camera-retro perhaps?)
 ```

+?> Mermaid is now only compatible with Font Awesome versions 4 and 5. Check that you are using the correct version of Font Awesome.
+
 ## Graph declarations with spaces between vertices and link and without semicolon

 - In graph declarations, the statements also can now end without a semicolon. After release 0.2.16, ending a graph statement with semicolon is just optional. So the below graph declaration is also valid along with the old declarations of the graph.
@ -843,6 +938,14 @@ flowchart LR
    C -->|Two| E[Result two]
 ```

+```mermaid
+flowchart LR
+    A[Hard edge] -->|Link text| B(Round edge)
+    B --> C{Decision}
+    C -->|One| D[Result one]
+    C -->|Two| E[Result two]
+```
+
 ## Configuration...

 Is it possible to adjust the width of the rendered flowchart.
--- a/docs/gantt.md
+++ b/docs/gantt.md
@ -126,6 +126,8 @@ It is possible to set multiple dependencies separated by space:
        cherry :active, c, after b a, 1d
 ```

+### Title
+
 The `title` is an _optional_ string to be displayed at the top of the Gantt chart to describe the chart as a whole.

 ### Section statements
@ -148,6 +150,16 @@ taska3 : 5min
 Final milestone : milestone, m2, 18:14, 2min
 ```

+```mermaid
+gantt
+dateFormat HH:mm
+axisFormat %H:%M
+Initial milestone : milestone, m1, 17:49,2min
+taska2 : 10min
+taska3 : 5min
+Final milestone : milestone, m2, 18:14, 2min
+```
+
 ## Setting dates

 `dateFormat` defines the format of the date **input** of your gantt elements. How these dates are represented in the rendered chart **output** are defined by `axisFormat`.
--- a/docs/gitgraph.md
+++ b/docs/gitgraph.md
@ -2,8 +2,6 @@

 # Gitgraph Diagrams

-**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/gitgraph.md)
-
 > A Git Graph is a pictorial representation of git commits and git actions(commands) on various branches.

 These kind of diagram are particularly helpful to developers and devops teams to share their Git branching strategies. For example, it makes it easier to visualize how git flow works.
@ -67,6 +65,13 @@ A simple gitgraph showing three commits on the default (**_main_**) branch:
       commit
 ```

+```mermaid
+    gitGraph
+       commit
+       commit
+       commit
+```
+
 If you look closely at the previous example, you can see the default branch `main` along with three commits. Also, notice that by default each commit has been given a unique & random ID. What if you wanted to give your own custom ID to a commit? Yes, it is possible to do that with Mermaid.

 ### Adding custom commit id
@ -176,6 +181,16 @@ Let see this in an example:
       commit
 ```

+```mermaid
+    gitGraph
+       commit
+       commit
+       branch develop
+       commit
+       commit
+       commit
+```
+
 In this example, see how we started with default `main` branch, and pushed two commits on that.
 Then we created the `develop` branch, and all commits afterwards are put on the `develop` branch as it became the current branch.

@ -200,6 +215,19 @@ Let see modify our previous example:
       commit
 ```

+```mermaid
+    gitGraph
+       commit
+       commit
+       branch develop
+       commit
+       commit
+       commit
+       checkout main
+       commit
+       commit
+```
+
 In this example, see how we started with default `main` branch, and pushed two commits on that.
 Then we created the `develop` branch, and all three commits afterwards are put on the `develop` branch as it became the current branch.
 After this we made use of the `checkout` keyword to set the current branch as `main`, and all commit that follow are registered against the current branch, i.e. `main`.
@ -230,6 +258,22 @@ Let us modify our previous example to merge our two branches:
       commit
 ```

+```mermaid
+    gitGraph
+       commit
+       commit
+       branch develop
+       commit
+       commit
+       commit
+       checkout main
+       commit
+       commit
+       merge develop
+       commit
+       commit
+```
+
 In this example, see how we started with default `main` branch, and pushed two commits on that.
 Then we created the `develop` branch, and all three commits afterwards are put on the `develop` branch as it became the current branch.
 After this we made use of the `checkout` keyword to set the current branch as `main`, and all commits that follow are registered against the current branch, i.e. `main`.
@ -309,9 +353,9 @@ Here, a new commit representing the cherry-pick is created on the current branch

 A few important rules to note here are:

-1. You need to provide the `id` for an existing commit to be cherry-picked. If given commit id does not exist it will result in an error. For this, make use of the `commit id:$value` format of declaring commits. See the examples from above.
-2. The given commit must not exist on the current branch. The cherry-picked commit must always be a different branch than the current branch.
-3. Current branch must have at least one commit, before you can cherry-pick, otherwise it will cause an error is throw.
+1.  You need to provide the `id` for an existing commit to be cherry-picked. If given commit id does not exist it will result in an error. For this, make use of the `commit id:$value` format of declaring commits. See the examples from above.
+2.  The given commit must not exist on the current branch. The cherry-picked commit must always be a different branch than the current branch.
+3.  Current branch must have at least one commit, before you can cherry-pick, otherwise it will cause an error is throw.

 Let see an example:

@ -332,6 +376,23 @@ Let see an example:
       commit id:"C"
 ```

+```mermaid
+    gitGraph
+       commit id: "ZERO"
+       branch develop
+       commit id:"A"
+       checkout main
+       commit id:"ONE"
+       checkout develop
+       commit id:"B"
+       checkout main
+       commit id:"TWO"
+       cherry-pick id:"A"
+       commit id:"THREE"
+       checkout develop
+       commit id:"C"
+```
+
 ## Gitgraph specific configuration options

 In Mermaid, you have the option to configure the gitgraph diagram. You can configure the following options:
@ -395,6 +456,52 @@ Usage example:
        merge release
 ```

+```mermaid
+%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false}} }%%
+      gitGraph
+        commit
+        branch hotfix
+        checkout hotfix
+        commit
+        branch develop
+        checkout develop
+        commit id:"ash" tag:"abc"
+        branch featureB
+        checkout featureB
+        commit type:HIGHLIGHT
+        checkout main
+        checkout hotfix
+        commit type:NORMAL
+        checkout develop
+        commit type:REVERSE
+        checkout featureB
+        commit
+        checkout main
+        merge hotfix
+        checkout featureB
+        commit
+        checkout develop
+        branch featureA
+        commit
+        checkout develop
+        merge hotfix
+        checkout featureA
+        commit
+        checkout featureB
+        commit
+        checkout develop
+        merge featureA
+        branch release
+        checkout release
+        commit
+        checkout main
+        commit
+        checkout release
+        merge main
+        checkout develop
+        merge release
+```
+
 ## Commit labels Layout: Rotated or Horizontal

 Mermaid supports two types of commit labels layout. The default layout is **rotated**, which means the labels are placed below the commit circle, rotated at 45 degrees for better readability. This is particularly useful for commits with long labels.
@ -424,6 +531,25 @@ gitGraph
  commit
 ```

+```mermaid
+%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': true}} }%%
+gitGraph
+  commit id: "feat(api): ..."
+  commit id: "a"
+  commit id: "b"
+  commit id: "fix(client): .extra long label.."
+  branch c2
+  commit id: "feat(modules): ..."
+  commit id: "test(client): ..."
+  checkout main
+  commit id: "fix(api): ..."
+  commit id: "ci: ..."
+  branch b1
+  commit
+  branch b2
+  commit
+```
+
 Usage example: Horizontal commit labels

 ```mermaid-example
@ -445,6 +571,25 @@ gitGraph
  commit
 ```

+```mermaid
+%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': false}} }%%
+gitGraph
+  commit id: "feat(api): ..."
+  commit id: "a"
+  commit id: "b"
+  commit id: "fix(client): .extra long label.."
+  branch c2
+  commit id: "feat(modules): ..."
+  commit id: "test(client): ..."
+  checkout main
+  commit id: "fix(api): ..."
+  commit id: "ci: ..."
+  branch b1
+  commit
+  branch b2
+  commit
+```
+
 ## Hiding commit labels

 Sometimes you may want to hide the commit labels from the diagram. You can do this by using the `showCommitLabel` keyword. By default its value is `true`. You can set it to `false` using directives.
@ -497,14 +642,8 @@ Usage example:
        merge release
 ```

-## Customizing main branch name
-
-Sometimes you may want to customize the name of the main/default branch. You can do this by using the `mainBranchName` keyword. By default its value is `main`. You can set it to any string using directives.
-
-Usage example:
-
-```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchName': 'MetroLine1'}} }%%
+```mermaid
+%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false,'showCommitLabel': false}} }%%
      gitGraph
        commit
        branch hotfix
@ -579,6 +718,30 @@ Usage example:
        commit type:REVERSE id:"SanFrancisco"
 ```

+```mermaid
+%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchName': 'MetroLine1'}} }%%
+      gitGraph
+        commit id:"NewYork"
+        commit id:"Dallas"
+        branch MetroLine2
+        commit id:"LosAngeles"
+        commit id:"Chicago"
+        commit id:"Houston"
+        branch MetroLine3
+        commit id:"Phoenix"
+        commit type: HIGHLIGHT id:"Denver"
+        commit id:"Boston"
+        checkout MetroLine1
+        commit id:"Atlanta"
+        merge MetroLine3
+        commit id:"Miami"
+        commit id:"Washington"
+        merge MetroLine2 tag:"MY JUNCTION"
+        commit id:"Boston"
+        commit id:"Detroit"
+        commit type:REVERSE id:"SanFrancisco"
+```
+
 Look at the imaginary railroad map created using Mermaid. Here, we have changed the default main branch name to `MetroLine1`.

 ## Customizing branch ordering
@ -607,6 +770,16 @@ Usage example:

 ```

+```mermaid
+%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true}} }%%
+      gitGraph
+      commit
+      branch test1 order: 3
+      branch test2 order: 2
+      branch test3 order: 1
+
+```
+
 Look at the diagram, all the branches are following the order defined.

 Usage example:
@ -622,6 +795,17 @@ Usage example:

 ```

+```mermaid
+%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchOrder': 2}} }%%
+      gitGraph
+      commit
+      branch test1 order: 3
+      branch test2
+      branch test3
+      branch test4 order: 1
+
+```
+
 Look at the diagram, here, all the branches without a specified order are drawn in their order of definition.
 Then, `test4` branch is drawn because the order of `1`.
 Then, `main` branch is drawn because the order of `2`.
@ -928,7 +1112,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        merge release
 ```

-### Forest Theme
+### Dark Theme

 ```mermaid-example
 %%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
@ -976,8 +1160,6 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        merge release
 ```

-### Default Theme
-
 ```mermaid
 %%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
      gitGraph
@ -1024,7 +1206,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        merge release
 ```

-### Dark Theme
+### Neutral Theme

 ```mermaid-example
 %%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%
@ -1072,8 +1254,6 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        merge release
 ```

-### Neutral Theme
-
 ```mermaid
 %%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%
      gitGraph
@ -1144,6 +1324,22 @@ See how the default theme is used to set the colors for the branches:
       commit
 ```

+```mermaid
+%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
+       gitGraph
+       commit
+       branch develop
+       commit tag:"v1.0.0"
+       commit
+       checkout main
+       commit type: HIGHLIGHT
+       commit
+       merge develop
+       commit
+       branch featureA
+       commit
+```
+
 > #### IMPORTANT:
 >
 > Mermaid supports the theme variables to override the default values for **up to 8 branches**, i.e., you can set the color/styling of up to 8 branches using theme variables. After this threshold of 8 branches, the theme variables are reused in the cyclic manner, i.e. the 9th branch will use the color/styling of the 1st branch, or the branch at index position '8' will use the color/styling of the branch at index position '0'.
@ -1185,6 +1381,32 @@ Now let's override the default values for the `git0` to `git3` variables:

 ```

+```mermaid
+    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
+              'git0': '#ff0000',
+              'git1': '#00ff00',
+              'git2': '#0000ff',
+              'git3': '#ff00ff',
+              'git4': '#00ffff',
+              'git5': '#ffff00',
+              'git6': '#ff00ff',
+              'git7': '#00ffff'
+       } } }%%
+       gitGraph
+       commit
+       branch develop
+       commit tag:"v1.0.0"
+       commit
+       checkout main
+       commit type: HIGHLIGHT
+       commit
+       merge develop
+       commit
+       branch featureA
+       commit
+
+```
+
 See how the branch colors are changed to the values specified in the theme variables.

 ### Customizing branch label colors
@ -1223,6 +1445,34 @@ Now let's override the default values for the `gitBranchLabel0` to `gitBranchLab
    commit
 ```

+```mermaid
+    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
+        'gitBranchLabel0': '#ffffff',
+        'gitBranchLabel1': '#ffffff',
+        'gitBranchLabel2': '#ffffff',
+        'gitBranchLabel3': '#ffffff',
+        'gitBranchLabel4': '#ffffff',
+        'gitBranchLabel5': '#ffffff',
+        'gitBranchLabel6': '#ffffff',
+        'gitBranchLabel7': '#ffffff',
+        'gitBranchLabel8': '#ffffff',
+        'gitBranchLabel9': '#ffffff'
+  } } }%%
+  gitGraph
+    checkout main
+    branch branch1
+    branch branch2
+    branch branch3
+    branch branch4
+    branch branch5
+    branch branch6
+    branch branch7
+    branch branch8
+    branch branch9
+    checkout branch1
+    commit
+```
+
 Here, you can see that `branch8` and `branch9` colors and the styles are being picked from branch at index position `0` (`main`) and `1`(`branch1`) respectively, i.e., **branch themeVariables are repeated cyclically**.

 ### Customizing Commit colors
@ -1252,6 +1502,26 @@ Now let's override the default values for the `commitLabelColor` to `commitLabel

 ```

+```mermaid
+    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
+              'commitLabelColor': '#ff0000',
+              'commitLabelBackground': '#00ff00'
+       } } }%%
+       gitGraph
+       commit
+       branch develop
+       commit tag:"v1.0.0"
+       commit
+       checkout main
+       commit type: HIGHLIGHT
+       commit
+       merge develop
+       commit
+       branch featureA
+       commit
+
+```
+
 See how the commit label color and background color are changed to the values specified in the theme variables.

 ### Customizing Commit Label Font Size
@ -1282,6 +1552,27 @@ Now let's override the default values for the `commitLabelFontSize` variable:

 ```

+```mermaid
+    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
+              'commitLabelColor': '#ff0000',
+              'commitLabelBackground': '#00ff00',
+              'commitLabelFontSize': '16px'
+       } } }%%
+       gitGraph
+       commit
+       branch develop
+       commit tag:"v1.0.0"
+       commit
+       checkout main
+       commit type: HIGHLIGHT
+       commit
+       merge develop
+       commit
+       branch featureA
+       commit
+
+```
+
 See how the commit label font size changed.

 ### Customizing Tag Label Font Size
@ -1312,6 +1603,27 @@ Now let's override the default values for the `tagLabelFontSize` variable:

 ```

+```mermaid
+    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
+              'commitLabelColor': '#ff0000',
+              'commitLabelBackground': '#00ff00',
+              'tagLabelFontSize': '16px'
+       } } }%%
+       gitGraph
+       commit
+       branch develop
+       commit tag:"v1.0.0"
+       commit
+       checkout main
+       commit type: HIGHLIGHT
+       commit
+       merge develop
+       commit
+       branch featureA
+       commit
+
+```
+
 See how the tag label font size changed.

 ### Customizing Tag colors
@ -1341,6 +1653,27 @@ Now let's override the default values for the `tagLabelColor`, `tagLabelBackgrou

 ```

+```mermaid
+    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
+              'tagLabelColor': '#ff0000',
+              'tagLabelBackground': '#00ff00',
+              'tagLabelBorder': '#0000ff'
+       } } }%%
+       gitGraph
+       commit
+       branch develop
+       commit tag:"v1.0.0"
+       commit
+       checkout main
+       commit type: HIGHLIGHT
+       commit
+       merge develop
+       commit
+       branch featureA
+       commit
+
+```
+
 See how the tag colors are changed to the values specified in the theme variables.

 ### Customizing Highlight commit colors
@ -1370,4 +1703,23 @@ Now let's override the default values for the `git0` to `git3` variables:

 ```

+```mermaid
+    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
+              'gitInv0': '#ff0000'
+       } } }%%
+       gitGraph
+       commit
+       branch develop
+       commit tag:"v1.0.0"
+       commit
+       checkout main
+       commit type: HIGHLIGHT
+       commit
+       merge develop
+       commit
+       branch featureA
+       commit
+
+```
+
 See how the highlighted commit color on the first branch is changed to the value specified in the theme variable `gitInv0`.
--- a/docs/index.html
+++ b/docs/index.html
@ -103,26 +103,14 @@
        markdown: {
          renderer: {
            code: function (code, lang) {
-              if (lang && (lang.startsWith('mermaid') || lang === 'mmd')) {
-                var resultingHTML = '';
-
-                if (lang === 'mmd' || lang === 'mermaid-example') {
-                  currentCodeExample++;
-                  colorize.push(currentCodeExample);
-                  resultingHTML +=
-                    '<pre id="code' + currentCodeExample + '">' + escapeHTML(code) + '</pre>';
-                }
-
-                if (lang === 'mermaid' || lang === 'mermaid-example') {
-                  resultingHTML +=
-                    '<div class="mermaid">' +
-                    mermaid.render('mermaid-svg-' + num++, code) +
-                    '</div>';
-                }
-
-                if (resultingHTML !== '') {
-                  return resultingHTML;
-                }
+              if (lang === 'mermaid-example') {
+                currentCodeExample++;
+                colorize.push(currentCodeExample);
+                return '<pre id="code' + currentCodeExample + '">' + escapeHTML(code) + '</pre>';
+              } else if (lang === 'mermaid') {
+                return (
+                  '<pre class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + '</pre>'
+                );
              }
              return this.origin.code.apply(this, arguments);
            },
--- a/docs/n00b-advanced.md
+++ b/docs/n00b-advanced.md
@ -6,18 +6,14 @@

 A more condensed html code can be achieved by embedding the mermaid code in its own .js file, which is referenced like so:

-```
-stuff stuff
-  </div>
-  </body>
-</html>
-```
+    stuff stuff
+      </div>
+      </body>
+    </html>

 The actual mermaid file could for example look like this:

-```
-mermaid content...
-```
+    mermaid content...

 ---

--- a/docs/n00b-syntaxReference.md
+++ b/docs/n00b-syntaxReference.md
@ -26,6 +26,18 @@ erDiagram
          PRODUCT ||--o{ ORDER-ITEM : "ordered in"
 ```

+```mermaid
+erDiagram
+          CUSTOMER }|..|{ DELIVERY-ADDRESS : has
+          CUSTOMER ||--o{ ORDER : places
+          CUSTOMER ||--o{ INVOICE : "liable for"
+          DELIVERY-ADDRESS ||--o{ ORDER : receives
+          INVOICE ||--|{ ORDER : covers
+          ORDER ||--|{ ORDER-ITEM : includes
+          PRODUCT-CATEGORY ||--|{ PRODUCT : contains
+          PRODUCT ||--o{ ORDER-ITEM : "ordered in"
+```
+
 The [Getting Started](./n00b-gettingStarted.md) section can also provide some practical examples of mermaid syntax.

 ## Diagram Breaking
--- a/docs/newDiagram.md
+++ b/docs/newDiagram.md
@ -169,10 +169,6 @@ It is probably a good idea to keep the handling similar to this in your new diag

 The syntax for adding title and description looks like this:

-````
-accTitle: The title
-accDescr: The description
-
    accTitle: The title
    accDescr: The description

@ -203,7 +199,7 @@ statement
    : acc_title acc_title_value  { $$=$2.trim();yy.setTitle($$); }
    | acc_descr acc_descr_value  { $$=$2.trim();yy.setAccDescription($$); }
    | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); }
-````
+```

 The functions for setting title and description are provided by a common module. This is the import from flowDb.js:

@ -262,4 +258,4 @@ const themes = {
 };
 ```

-The actual options and values for the colors are defined in **src/theme/theme-[xyz].js**. If you provide the options your diagram needs in the existing theme files then the theming will work smoothly without hiccups.
+The actual options and values for the colors are defined in **src/theme/theme-\[xyz].js**. If you provide the options your diagram needs in the existing theme files then the theming will work smoothly without hiccups.
--- a/docs/pie.md
+++ b/docs/pie.md
@ -3,7 +3,7 @@
 # Pie chart diagrams

 > A pie chart (or a circle chart) is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area), is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented. The earliest known pie chart is generally credited to William Playfair's Statistical Breviary of 1801
-> -Wikipedia
+> \-Wikipedia

 Mermaid can render Pie Chart diagrams.

@ -14,6 +14,13 @@ pie title Pets adopted by volunteers
    "Rats" : 15
 ```

+```mermaid
+pie title Pets adopted by volunteers
+    "Dogs" : 386
+    "Cats" : 85
+    "Rats" : 15
+```
+
 ## Syntax

 Drawing a pie chart is really simple in mermaid.
@ -26,11 +33,11 @@ Drawing a pie chart is really simple in mermaid.
  - Followed by `:` colon as separator
  - Followed by `positive numeric value` (supported upto two decimal places)

-[pie] [showData] (OPTIONAL)
-[title] [titlevalue] (OPTIONAL)
-"[datakey1]" : [dataValue1]
-"[datakey2]" : [dataValue2]
-"[datakey3]" : [dataValue3]
+\[pie] \[showData] (OPTIONAL)
+\[title] \[titlevalue] (OPTIONAL)
+"\[datakey1]" : \[dataValue1]
+"\[datakey2]" : \[dataValue2]
+"\[datakey3]" : \[dataValue3]
 .
 .

--- a/docs/requirementDiagram.md
+++ b/docs/requirementDiagram.md
@ -71,7 +71,10 @@ Type, risk, and method are enumerations defined in SysML.

 An element definition contains an element name, type, and document reference. These three are all user defined. The element feature is intended to be lightweight but allow requirements to be connected to portions of other documents.

-An element definition contains an element name, type, and document reference. These three are all user defined. The element feature is intended to be lightweight but allow requirements to be connected to portions of other documents.
+    element user_defined_name {
+        type: user_defined_type
+        docref: user_defined_ref
+    }

 ### Relationship

--- a/docs/security.md
+++ b/docs/security.md
@ -1,3 +1,5 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+
 # Security

 The Mermaid team takes the security of Mermaid and the applications that use Mermaid seriously. This page describes how to report any vulnerabilities you may find, and lists best practices to minimize the risk of introducing a vulnerability.
--- a/docs/sequenceDiagram.md
+++ b/docs/sequenceDiagram.md
@ -2,8 +2,6 @@

 # Sequence diagrams

-**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/sequenceDiagram.md)
-
 > A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.

 Mermaid can render sequence diagrams.
@ -554,9 +552,7 @@ Actors can have popup-menus containing individualized links to external pages. F

 This can be configured by adding one or more link lines with the format:

-```
-link <actor>: <link-label> @ <link-url>
-```
+    link <actor>: <link-label> @ <link-url>

 ```mmd
 sequenceDiagram
--- a/docs/stateDiagram.md
+++ b/docs/stateDiagram.md
@ -223,6 +223,26 @@ stateDiagram-v2
    }
 ```

+```mermaid
+stateDiagram-v2
+    [*] --> First
+    First --> Second
+    First --> Third
+
+    state First {
+        [*] --> fir
+        fir --> [*]
+    }
+    state Second {
+        [*] --> sec
+        sec --> [*]
+    }
+    state Third {
+        [*] --> thi
+        thi --> [*]
+    }
+```
+
 _You can not define transitions between internal states belonging to different composite states_

 ## Choice
@ -366,6 +386,19 @@ stateDiagram
    B --> D
 ```

+```mermaid
+stateDiagram
+    direction LR
+    [*] --> A
+    A --> B
+    B --> C
+    state B {
+      direction LR
+      a --> b
+    }
+    B --> D
+```
+
 ## Comments

 Comments can be entered within a state diagram chart, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
--- a/docs/theming.md
+++ b/docs/theming.md
@ -12,15 +12,15 @@ Themes follow and build upon the Levels of Configuration, and employ `directives

 The following are a list of **Deployable themes**, sample `%%init%%` directives and `initialize` calls.

-1. **base**- Designed to be modified, as the name implies it is supposed to be used as the base for making custom themes.
+1.  **base**- Designed to be modified, as the name implies it is supposed to be used as the base for making custom themes.

-1. **base**- Designed to be modified, as the name implies it is supposed to be used as the base for making custom themes.
+2.  **forest**- A theme full of light greens that is easy on the eyes.

-1. **forest**- A theme full of light greens that is easy on the eyes.
+3.  **dark**- A theme that would go well with other dark-colored elements.

-1. **dark**- A theme that would go well with other dark-colored elements.
+4.  **default**- The default theme for all diagrams.

-1. **default**- The default theme for all diagrams.
+5.  **neutral**- The theme to be used for black and white printing.

 ## Site-wide Themes

@ -67,6 +67,24 @@ Here is an example of how `%%init%%` can set the theme to 'base', this assumes t
          end
 ```

+```mermaid
+%%{init: {'theme':'base'}}%%
+        graph TD
+          A[Christmas] -->|Get money| B(Go shopping)
+          B --> C{Let me think}
+          B --> G[/Another/]
+          C ==>|One| D[Laptop]
+          C -->|Two| E[iPhone]
+          C -->|Three| F[fa:fa-car Car]
+          subgraph section
+            C
+            D
+            E
+            F
+            G
+          end
+```
+
 # List of Themes

 # Customizing Themes with `themeVariables`
@ -97,6 +115,24 @@ The easiest way to make a custom theme is to start with the base theme, and just
          end
 ```

+```mermaid
+%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
+        graph TD
+          A[Christmas] -->|Get money| B(Go shopping)
+          B --> C{Let me think}
+          B --> G[/Another/]
+          C ==>|One| D[Laptop]
+          C -->|Two| E[iPhone]
+          C -->|Three| F[fa:fa-car Car]
+          subgraph section
+            C
+            D
+            E
+            F
+            G
+          end
+```
+
 **Notes:**
 Leaving it empty will set all variable values to default.

@ -220,6 +256,24 @@ Variables that are unique to some diagrams can be affected by changes in Theme V
          end
 ```

+```mermaid
+%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
+        graph TD
+          A[Christmas] -->|Get money| B(Go shopping)
+          B --> C{Let me think}
+          B --> G[/Another/]
+          C ==>|One| D[Laptop]
+          C -->|Two| E[iPhone]
+          C -->|Three| F[fa:fa-car Car]
+          subgraph section
+            C
+            D
+            E
+            F
+            G
+          end
+```
+
 \*\*This got a bit too dark and bit too colorful. With some easy steps this can be fixed:

 - Make the primary color a little lighter
@ -293,6 +347,24 @@ In the following examples, the directive `init` is used, with the `theme` being
          end
 ```

+```mermaid-example
+%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
+        graph TD
+          A[Christmas] -->|Get money| B(Go shopping)
+          B --> C{Let me think}
+          B --> G[/Another/]
+          C ==>|One| D[Laptop]
+          C -->|Two| E[iPhone]
+          C -->|Three| F[fa:fa-car Car]
+          subgraph section
+            C
+            D
+            E
+            F
+            G
+          end
+```
+
 ```mermaid
 %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
        graph TD
--- a/docs/usage.md
+++ b/docs/usage.md
@ -1,3 +1,5 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+
 # Usage

 Mermaid is a JavaScript tool that makes use of a Markdown based syntax to render customizable diagrams, charts and visualizations.
@ -240,11 +242,11 @@ var id = 'theGraph';
 mermaidAPI.render(id, txt, insertSvg, element);
 ```

-1. The graph is generated using the render call.
-2. After generation the render function calls the provided callback function, in this case it's called insertSvg.
-3. The callback function is called with two parameters, the SVG code of the generated graph and a function. This function binds events to the SVG **after** it is inserted into the DOM.
-4. Insert the SVG code into the DOM for presentation.
-5. Call the binding function that binds the events.
+1.  The graph is generated using the render call.
+2.  After generation the render function calls the provided callback function, in this case it's called insertSvg.
+3.  The callback function is called with two parameters, the SVG code of the generated graph and a function. This function binds events to the SVG **after** it is inserted into the DOM.
+4.  Insert the SVG code into the DOM for presentation.
+5.  Call the binding function that binds the events.

 ## Example of a marked renderer

@ -321,10 +323,10 @@ One effective and more future-proof method of validating your graph definitions,
 Mermaid takes a number of options which lets you tweak the rendering of the diagrams. Currently there are three ways of
 setting the options in mermaid.

-1. Instantiation of the configuration using the initialize call
-2. _Using the global mermaid object_ - **Deprecated**
-3. _using the global mermaid_config object_ - **Deprecated**
-4. Instantiation of the configuration using the **mermaid.init** call- **Deprecated**
+1.  Instantiation of the configuration using the initialize call
+2.  _Using the global mermaid object_ - **Deprecated**
+3.  _using the global mermaid_config object_ - **Deprecated**
+4.  Instantiation of the configuration using the **mermaid.init** call- **Deprecated**

 The list above has two ways too many of doing this. Three are deprecated and will eventually be removed. The list of
 configuration objects are described [in the mermaidAPI documentation](Setup.md).
--- a/src/docs/directives.md
+++ b/src/docs/directives.md
@ -27,8 +27,7 @@ Mermaid basically supports two types of configuration options to be overridden b
 **NOTE:** These options listed here are not all the configuration options. To get hold of all the configuration options, please refer to the [defaultConfig.js](https://github.com/mermaid-js/mermaid/blob/develop/src/defaultConfig.js) in the source code.

 ```
-Soon we plan to publish a complete list of top-level configurations & all the diagram specific configurations,
-with their possible values in the docs
+Soon we plan to publish a complete list of top-level configurations & all the diagram specific configurations, with their possible values in the docs
 ```

 ## Declaring directives
--- a/yarn.lock
+++ b/yarn.lock
@ -6053,12 +6053,7 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==

-fast-diff@^1.1.2:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
-  integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
-
-fast-glob@^3.2.9:
+fast-glob@^3.2.11, fast-glob@^3.2.9:
  version "3.2.11"
  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
  integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==