From f6d69b33b3b6c49294b797b200d3c18249e156b6 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sat, 3 Sep 2022 13:30:16 +0530 Subject: [PATCH] Prettier --- __mocks__/d3.js | 3 + docs/CHANGELOG.md | 1080 +++++------ docs/README.md | 20 +- docs/SUMMARY.md | 26 +- docs/Setup.md | 170 +- docs/_navbar.md | 22 +- docs/_sidebar.md | 70 +- docs/accessibility.md | 4 +- docs/breakingChanges.md | 2 +- docs/c4c.md | 136 +- docs/classDiagram.md | 184 +- docs/developer-docs/configuration.md | 6 +- docs/development.md | 16 +- .../flowchart.md | 72 +- docs/directives.md | 52 +- docs/entityRelationshipDiagram.md | 18 +- docs/flowchart.md | 66 +- docs/gantt.md | 132 +- docs/gitgraph.md | 44 +- docs/integrations.md | 258 +-- docs/landing/index.html | 50 +- docs/n00b-gettingStarted.md | 74 +- docs/n00b-overview.md | 10 +- docs/newDiagram.md | 26 +- docs/pie.md | 14 +- docs/sequenceDiagram.md | 88 +- docs/theme.css | 828 ++++++++- docs/theme_themed.css | 1653 ++++++++++++++++- docs/theming.md | 10 +- docs/upgrading.md | 4 +- docs/usage.md | 114 +- package.json | 2 +- src/dagre-wrapper/GraphObjects.md | 85 +- src/dagre-wrapper/edges.js | 2 +- .../flowchart/flowChartShapes.spec.js | 13 + src/diagrams/git/gitGraphAst.js | 3 + src/diagrams/git/layout.js | 2 +- src/diagrams/sequence/svgDraw.js | 5 +- src/docs.mts | 2 +- src/docs/8.6.0_docs.md | 89 +- src/docs/CHANGELOG.md | 95 +- src/docs/Configuration.md | 19 +- src/docs/README.md | 20 +- src/docs/Setup.md | 62 +- src/docs/Tutorials.md | 8 +- src/docs/_navbar.md | 22 +- src/docs/_sidebar.md | 2 + src/docs/accessibility.md | 4 +- src/docs/breakingChanges.md | 8 +- src/docs/c4c.md | 136 +- src/docs/classDiagram.md | 135 +- src/docs/developer-docs/configuration.md | 6 +- src/docs/development.md | 16 +- .../flowchart.md | 101 +- src/docs/directives.md | 114 +- src/docs/entityRelationshipDiagram.md | 18 +- src/docs/examples.md | 6 +- src/docs/flowchart.md | 66 +- src/docs/gantt.md | 157 +- src/docs/gitgraph.md | 44 +- src/docs/integrations.md | 34 +- src/docs/landing/index.html | 50 +- src/docs/n00b-advanced.md | 3 + src/docs/n00b-gettingStarted.md | 91 +- src/docs/n00b-overview.md | 22 +- src/docs/n00b-syntaxReference.md | 54 +- src/docs/newDiagram.md | 68 +- src/docs/pie.md | 28 +- src/docs/requirementDiagram.md | 19 +- src/docs/security.md | 5 +- src/docs/sequenceDiagram.md | 88 +- src/docs/stateDiagram.md | 11 +- src/docs/theme.css | 828 ++++++++- src/docs/theme_themed.css | 1653 ++++++++++++++++- src/docs/theming.md | 10 +- src/docs/upgrading.md | 11 +- src/docs/usage.md | 134 +- test.js | 3 + 78 files changed, 7227 insertions(+), 2379 deletions(-) diff --git a/__mocks__/d3.js b/__mocks__/d3.js index c5c7deed8..268aadf24 100644 --- a/__mocks__/d3.js +++ b/__mocks__/d3.js @@ -1,4 +1,7 @@ let NewD3 = function () { + /** + * + */ function returnThis() { return this; } diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 7638bc0cf..d676920b7 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -28,8 +28,8 @@ Example of `Initalize` call setting `theme` to `base`: ```javascript mermaidAPI.initialize({ - securityLevel: 'loose', - theme: 'base', + securityLevel: 'loose', + theme: 'base', }); ``` @@ -119,9 +119,9 @@ This was introduced in version 8.2 as a security improvement, aimed at preventin **Notes:** -- **strict**: (**default**) tags in text are encoded, click functionality is disabled -- **loose**: tags in text are allowed, click functionality is enabled -- **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled +- **strict**: (**default**) tags in text are encoded, click functionality is disabled +- **loose**: tags in text are allowed, click functionality is enabled +- **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled ⚠️ **Note**: This changes the default behaviour of mermaid so that after upgrade to 8.2, if the `securityLevel` is not configured, tags in flowcharts are encoded as tags and clicking is prohibited. @@ -132,14 +132,14 @@ By doing this clicks and tags are again allowed. ```javascript mermaidAPI.initialize({ - securityLevel: 'loose', + securityLevel: 'loose', }); ``` **Closed issues:** -- please add tag for 8.0.0 release [#863](https://github.com/knsv/mermaid/issues/863) -- classDiagram breaks on any edit [#858](https://github.com/knsv/mermaid/issues/858) +- please add tag for 8.0.0 release [#863](https://github.com/knsv/mermaid/issues/863) +- classDiagram breaks on any edit [#858](https://github.com/knsv/mermaid/issues/858) ## [8.1.0](https://github.com/knsv/mermaid/tree/8.1.0) (2019-06-25) @@ -147,212 +147,212 @@ mermaidAPI.initialize({ **Implemented enhancements:** -- Theme for dark background [#301](https://github.com/knsv/mermaid/issues/301) -- \[Feature request] gantt diagram axis format [#269](https://github.com/knsv/mermaid/issues/269) -- Implement render function for server side rendering using phantomjs [#169](https://github.com/knsv/mermaid/issues/169) +- Theme for dark background [#301](https://github.com/knsv/mermaid/issues/301) +- \[Feature request] gantt diagram axis format [#269](https://github.com/knsv/mermaid/issues/269) +- Implement render function for server side rendering using phantomjs [#169](https://github.com/knsv/mermaid/issues/169) **Fixed bugs:** -- mermaid -v filename.mmd gives You must specify at least one source file. [#328](https://github.com/knsv/mermaid/issues/328) -- Not Able to See Labels even htmlLabels:false added [#268](https://github.com/knsv/mermaid/issues/268) +- mermaid -v filename.mmd gives You must specify at least one source file. [#328](https://github.com/knsv/mermaid/issues/328) +- Not Able to See Labels even htmlLabels:false added [#268](https://github.com/knsv/mermaid/issues/268) **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 \ 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 \ 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) @@ -360,23 +360,23 @@ mermaidAPI.initialize({ **Closed issues:** -- live editor latin error after update [#560](https://github.com/knsv/mermaid/issues/560) -- Simple full example in online documentation is broken [#558](https://github.com/knsv/mermaid/issues/558) -- Graph No Arrow Head v7.0.3 [#543](https://github.com/knsv/mermaid/issues/543) -- Conflict while using mermaid along with core-js [#512](https://github.com/knsv/mermaid/issues/512) -- Export to pdf on website [#496](https://github.com/knsv/mermaid/issues/496) -- New downstream project: Mermaid Preview for VSCode [#442](https://github.com/knsv/mermaid/issues/442) -- Can't Zoom the flowchart ? [#399](https://github.com/knsv/mermaid/issues/399) -- line labels are not rendered correctly in live editor [#366](https://github.com/knsv/mermaid/issues/366) -- mermaid-loader [#361](https://github.com/knsv/mermaid/issues/361) -- Are there any documentation or examples for classDiagram and gitGraph? [#359](https://github.com/knsv/mermaid/issues/359) -- \# character broken in 0.5.8 [#347](https://github.com/knsv/mermaid/issues/347) -- Documentation issue: CSS example is not visible [#345](https://github.com/knsv/mermaid/issues/345) -- Include documentation for command line usage [#326](https://github.com/knsv/mermaid/issues/326) -- Fresh fork: can't build dist [#296](https://github.com/knsv/mermaid/issues/296) -- Invalid value for \ attribute viewBox="0 0 -Infinity -Infinity" [#291](https://github.com/knsv/mermaid/issues/291) -- Webpack require fails [#277](https://github.com/knsv/mermaid/issues/277) -- New documentation - need improved logo [#216](https://github.com/knsv/mermaid/issues/216) +- live editor latin error after update [#560](https://github.com/knsv/mermaid/issues/560) +- Simple full example in online documentation is broken [#558](https://github.com/knsv/mermaid/issues/558) +- Graph No Arrow Head v7.0.3 [#543](https://github.com/knsv/mermaid/issues/543) +- Conflict while using mermaid along with core-js [#512](https://github.com/knsv/mermaid/issues/512) +- Export to pdf on website [#496](https://github.com/knsv/mermaid/issues/496) +- New downstream project: Mermaid Preview for VSCode [#442](https://github.com/knsv/mermaid/issues/442) +- Can't Zoom the flowchart ? [#399](https://github.com/knsv/mermaid/issues/399) +- line labels are not rendered correctly in live editor [#366](https://github.com/knsv/mermaid/issues/366) +- mermaid-loader [#361](https://github.com/knsv/mermaid/issues/361) +- Are there any documentation or examples for classDiagram and gitGraph? [#359](https://github.com/knsv/mermaid/issues/359) +- \# character broken in 0.5.8 [#347](https://github.com/knsv/mermaid/issues/347) +- Documentation issue: CSS example is not visible [#345](https://github.com/knsv/mermaid/issues/345) +- Include documentation for command line usage [#326](https://github.com/knsv/mermaid/issues/326) +- Fresh fork: can't build dist [#296](https://github.com/knsv/mermaid/issues/296) +- Invalid value for \ attribute viewBox="0 0 -Infinity -Infinity" [#291](https://github.com/knsv/mermaid/issues/291) +- Webpack require fails [#277](https://github.com/knsv/mermaid/issues/277) +- New documentation - need improved logo [#216](https://github.com/knsv/mermaid/issues/216) ## [7.0.3](https://github.com/knsv/mermaid/tree/7.0.3) (2017-06-04) @@ -384,8 +384,8 @@ mermaidAPI.initialize({ **Closed issues:** -- the documentation website is down [#539](https://github.com/knsv/mermaid/issues/539) -- Good example of interactivity with mermaidAPI [#514](https://github.com/knsv/mermaid/issues/514) +- the documentation website is down [#539](https://github.com/knsv/mermaid/issues/539) +- Good example of interactivity with mermaidAPI [#514](https://github.com/knsv/mermaid/issues/514) ## [7.0.2](https://github.com/knsv/mermaid/tree/7.0.2) (2017-06-01) @@ -393,37 +393,37 @@ mermaidAPI.initialize({ **Closed issues:** -- CDN is not working [#511](https://github.com/knsv/mermaid/issues/511) -- A sampe sequenceDiagram crashes mermaid-cli [#492](https://github.com/knsv/mermaid/issues/492) -- Mermaid doesn't delete nodes when called multiple times [#491](https://github.com/knsv/mermaid/issues/491) -- API crashes on 2nd render() call [#478](https://github.com/knsv/mermaid/issues/478) -- sequenceDiagram: dotted line for alt and empty bracket should be hidden [#456](https://github.com/knsv/mermaid/issues/456) -- SVG output (almost) not correct [#434](https://github.com/knsv/mermaid/issues/434) -- How to set axisFormatter of gantt in mermaid CLI? [#428](https://github.com/knsv/mermaid/issues/428) -- customizing link style with any color sets `fill` property to `black` instead of `none` [#416](https://github.com/knsv/mermaid/issues/416) -- New line at the end of SVG file [#400](https://github.com/knsv/mermaid/issues/400) -- CLI doesn't work [#389](https://github.com/knsv/mermaid/issues/389) -- Can't render subgraphs with htmlLabels: false [#367](https://github.com/knsv/mermaid/issues/367) -- Color arrowhead [#362](https://github.com/knsv/mermaid/issues/362) -- CLI: Invisible text, lines in SVG output [#341](https://github.com/knsv/mermaid/issues/341) +- CDN is not working [#511](https://github.com/knsv/mermaid/issues/511) +- A sampe sequenceDiagram crashes mermaid-cli [#492](https://github.com/knsv/mermaid/issues/492) +- Mermaid doesn't delete nodes when called multiple times [#491](https://github.com/knsv/mermaid/issues/491) +- API crashes on 2nd render() call [#478](https://github.com/knsv/mermaid/issues/478) +- sequenceDiagram: dotted line for alt and empty bracket should be hidden [#456](https://github.com/knsv/mermaid/issues/456) +- SVG output (almost) not correct [#434](https://github.com/knsv/mermaid/issues/434) +- How to set axisFormatter of gantt in mermaid CLI? [#428](https://github.com/knsv/mermaid/issues/428) +- customizing link style with any color sets `fill` property to `black` instead of `none` [#416](https://github.com/knsv/mermaid/issues/416) +- New line at the end of SVG file [#400](https://github.com/knsv/mermaid/issues/400) +- CLI doesn't work [#389](https://github.com/knsv/mermaid/issues/389) +- Can't render subgraphs with htmlLabels: false [#367](https://github.com/knsv/mermaid/issues/367) +- Color arrowhead [#362](https://github.com/knsv/mermaid/issues/362) +- CLI: Invisible text, lines in SVG output [#341](https://github.com/knsv/mermaid/issues/341) **Merged pull requests:** -- Support Multi-line Actor Descriptions [#764](https://github.com/knsv/mermaid/pull/764) ([watsoncj](https://github.com/watsoncj)) -- Update Travis config [#538](https://github.com/knsv/mermaid/pull/538) ([tylerlong](https://github.com/tylerlong)) -- Fix spelling of 'you' in sequenceDiagram docs [#537](https://github.com/knsv/mermaid/pull/537) ([ctruelson](https://github.com/ctruelson)) -- Improve CLI output [#536](https://github.com/knsv/mermaid/pull/536) ([gibson042](https://github.com/gibson042)) -- Modernize mermaid [#524](https://github.com/knsv/mermaid/pull/524) ([tylerlong](https://github.com/tylerlong)) -- Modernize mermaid [#519](https://github.com/knsv/mermaid/pull/519) ([tylerlong](https://github.com/tylerlong)) -- Update CLI instructions [#509](https://github.com/knsv/mermaid/pull/509) ([filipedeschamps](https://github.com/filipedeschamps)) -- Add style for classDiagram to dark/default theme [#503](https://github.com/knsv/mermaid/pull/503) ([yudenzel](https://github.com/yudenzel)) -- Fix documentation for git graph. [#498](https://github.com/knsv/mermaid/pull/498) ([gomlgs](https://github.com/gomlgs)) -- Fix links in documentations [#497](https://github.com/knsv/mermaid/pull/497) ([saveman71](https://github.com/saveman71)) -- Update README.md with git graph sample [#481](https://github.com/knsv/mermaid/pull/481) ([raghur](https://github.com/raghur)) -- Fix misspelling of “another” [#479](https://github.com/knsv/mermaid/pull/479) ([stevenschobert](https://github.com/stevenschobert)) -- Fixed #456 sequenceDiagram: dotted line for alt and empty bracket sho… [#477](https://github.com/knsv/mermaid/pull/477) ([brookhong](https://github.com/brookhong)) -- Add viewbox attr to class diagram [#473](https://github.com/knsv/mermaid/pull/473) ([gnkm](https://github.com/gnkm)) -- add par statement to sequenceDiagram [#470](https://github.com/knsv/mermaid/pull/470) ([u-minor](https://github.com/u-minor)) +- Support Multi-line Actor Descriptions [#764](https://github.com/knsv/mermaid/pull/764) ([watsoncj](https://github.com/watsoncj)) +- Update Travis config [#538](https://github.com/knsv/mermaid/pull/538) ([tylerlong](https://github.com/tylerlong)) +- Fix spelling of 'you' in sequenceDiagram docs [#537](https://github.com/knsv/mermaid/pull/537) ([ctruelson](https://github.com/ctruelson)) +- Improve CLI output [#536](https://github.com/knsv/mermaid/pull/536) ([gibson042](https://github.com/gibson042)) +- Modernize mermaid [#524](https://github.com/knsv/mermaid/pull/524) ([tylerlong](https://github.com/tylerlong)) +- Modernize mermaid [#519](https://github.com/knsv/mermaid/pull/519) ([tylerlong](https://github.com/tylerlong)) +- Update CLI instructions [#509](https://github.com/knsv/mermaid/pull/509) ([filipedeschamps](https://github.com/filipedeschamps)) +- Add style for classDiagram to dark/default theme [#503](https://github.com/knsv/mermaid/pull/503) ([yudenzel](https://github.com/yudenzel)) +- Fix documentation for git graph. [#498](https://github.com/knsv/mermaid/pull/498) ([gomlgs](https://github.com/gomlgs)) +- Fix links in documentations [#497](https://github.com/knsv/mermaid/pull/497) ([saveman71](https://github.com/saveman71)) +- Update README.md with git graph sample [#481](https://github.com/knsv/mermaid/pull/481) ([raghur](https://github.com/raghur)) +- Fix misspelling of “another” [#479](https://github.com/knsv/mermaid/pull/479) ([stevenschobert](https://github.com/stevenschobert)) +- Fixed #456 sequenceDiagram: dotted line for alt and empty bracket sho… [#477](https://github.com/knsv/mermaid/pull/477) ([brookhong](https://github.com/brookhong)) +- Add viewbox attr to class diagram [#473](https://github.com/knsv/mermaid/pull/473) ([gnkm](https://github.com/gnkm)) +- add par statement to sequenceDiagram [#470](https://github.com/knsv/mermaid/pull/470) ([u-minor](https://github.com/u-minor)) ## [7.0.0](https://github.com/knsv/mermaid/tree/7.0.0) (2017-01-29) @@ -431,53 +431,53 @@ mermaidAPI.initialize({ **Implemented enhancements:** -- npm install -g mermaid does not install phantomjs [#329](https://github.com/knsv/mermaid/issues/329) -- activation boxes [#313](https://github.com/knsv/mermaid/issues/313) +- npm install -g mermaid does not install phantomjs [#329](https://github.com/knsv/mermaid/issues/329) +- activation boxes [#313](https://github.com/knsv/mermaid/issues/313) **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) @@ -485,38 +485,38 @@ mermaidAPI.initialize({ **Closed issues:** -- Docs css: code hard to read [#324](https://github.com/knsv/mermaid/issues/324) -- About Markpad integration [#323](https://github.com/knsv/mermaid/issues/323) -- How to link backwards in flowchart? [#321](https://github.com/knsv/mermaid/issues/321) -- Help with editor [#310](https://github.com/knsv/mermaid/issues/310) -- \+1 [#293](https://github.com/knsv/mermaid/issues/293) -- Basic chart does not render on Chome, but does in Firefox [#290](https://github.com/knsv/mermaid/issues/290) -- Live editor is broken [#285](https://github.com/knsv/mermaid/issues/285) -- "No such file or directory" trying to run mermaid 0.5.7 on OS X [#284](https://github.com/knsv/mermaid/issues/284) -- participant name as "Long Long Name" [#283](https://github.com/knsv/mermaid/issues/283) -- Windows - cli - could not find phantomjs at the specified path [#236](https://github.com/knsv/mermaid/issues/236) +- Docs css: code hard to read [#324](https://github.com/knsv/mermaid/issues/324) +- About Markpad integration [#323](https://github.com/knsv/mermaid/issues/323) +- How to link backwards in flowchart? [#321](https://github.com/knsv/mermaid/issues/321) +- Help with editor [#310](https://github.com/knsv/mermaid/issues/310) +- \+1 [#293](https://github.com/knsv/mermaid/issues/293) +- Basic chart does not render on Chome, but does in Firefox [#290](https://github.com/knsv/mermaid/issues/290) +- Live editor is broken [#285](https://github.com/knsv/mermaid/issues/285) +- "No such file or directory" trying to run mermaid 0.5.7 on OS X [#284](https://github.com/knsv/mermaid/issues/284) +- participant name as "Long Long Name" [#283](https://github.com/knsv/mermaid/issues/283) +- Windows - cli - could not find phantomjs at the specified path [#236](https://github.com/knsv/mermaid/issues/236) **Merged pull requests:** -- The option of gantt for the spaces for the section names. [#353](https://github.com/knsv/mermaid/pull/353) ([zeroyonichihachi](https://github.com/zeroyonichihachi)) -- Gitgraph: Make reset work with parent ref carets [#350](https://github.com/knsv/mermaid/pull/350) ([raghur](https://github.com/raghur)) -- Remove the text-shadows that make the text look blurry [#349](https://github.com/knsv/mermaid/pull/349) ([AsaAyers](https://github.com/AsaAyers)) -- add line interpolation to linkStyle in flowchart [#346](https://github.com/knsv/mermaid/pull/346) ([AlanHohn](https://github.com/AlanHohn)) -- Support git graph diagrams in mermaid [#344](https://github.com/knsv/mermaid/pull/344) ([raghur](https://github.com/raghur)) -- Build and test execution changes [#338](https://github.com/knsv/mermaid/pull/338) ([ssbarnea](https://github.com/ssbarnea)) -- Reformatting of css files [#331](https://github.com/knsv/mermaid/pull/331) ([Jmuccigr](https://github.com/Jmuccigr)) -- (WIP) Sequence Diagram Title Support [#320](https://github.com/knsv/mermaid/pull/320) ([bronsoja](https://github.com/bronsoja)) -- activations doc + few fixes [#318](https://github.com/knsv/mermaid/pull/318) ([ciekawy](https://github.com/ciekawy)) -- Dark theme for better contrast on darker backgrounds [#317](https://github.com/knsv/mermaid/pull/317) ([crodriguez1a](https://github.com/crodriguez1a)) -- Activations [#316](https://github.com/knsv/mermaid/pull/316) ([ciekawy](https://github.com/ciekawy)) -- Support leading comments for sequenceDiagrams [#312](https://github.com/knsv/mermaid/pull/312) ([ashsearle](https://github.com/ashsearle)) -- Show a little lenience for white-space around names [#309](https://github.com/knsv/mermaid/pull/309) ([ashsearle](https://github.com/ashsearle)) -- Update list of downstream projects [#307](https://github.com/knsv/mermaid/pull/307) ([maxArturo](https://github.com/maxArturo)) -- Issue 299: Sequence diagram Loops: changing boxMargin spoils the "loop" notation [#300](https://github.com/knsv/mermaid/pull/300) ([LarryKlugerDS](https://github.com/LarryKlugerDS)) -- Issue 297 - src/mermaid.js generates bad code [#298](https://github.com/knsv/mermaid/pull/298) ([LarryKlugerDS](https://github.com/LarryKlugerDS)) -- Updated instructions for running tests [#295](https://github.com/knsv/mermaid/pull/295) ([LarryKlugerDS](https://github.com/LarryKlugerDS)) -- Add Markdown Plus to Downstream projects [#288](https://github.com/knsv/mermaid/pull/288) ([tylerlong](https://github.com/tylerlong)) -- Quote phantomPath so that it doesn't fail on window [#286](https://github.com/knsv/mermaid/pull/286) ([raghur](https://github.com/raghur)) +- The option of gantt for the spaces for the section names. [#353](https://github.com/knsv/mermaid/pull/353) ([zeroyonichihachi](https://github.com/zeroyonichihachi)) +- Gitgraph: Make reset work with parent ref carets [#350](https://github.com/knsv/mermaid/pull/350) ([raghur](https://github.com/raghur)) +- Remove the text-shadows that make the text look blurry [#349](https://github.com/knsv/mermaid/pull/349) ([AsaAyers](https://github.com/AsaAyers)) +- add line interpolation to linkStyle in flowchart [#346](https://github.com/knsv/mermaid/pull/346) ([AlanHohn](https://github.com/AlanHohn)) +- Support git graph diagrams in mermaid [#344](https://github.com/knsv/mermaid/pull/344) ([raghur](https://github.com/raghur)) +- Build and test execution changes [#338](https://github.com/knsv/mermaid/pull/338) ([ssbarnea](https://github.com/ssbarnea)) +- Reformatting of css files [#331](https://github.com/knsv/mermaid/pull/331) ([Jmuccigr](https://github.com/Jmuccigr)) +- (WIP) Sequence Diagram Title Support [#320](https://github.com/knsv/mermaid/pull/320) ([bronsoja](https://github.com/bronsoja)) +- activations doc + few fixes [#318](https://github.com/knsv/mermaid/pull/318) ([ciekawy](https://github.com/ciekawy)) +- Dark theme for better contrast on darker backgrounds [#317](https://github.com/knsv/mermaid/pull/317) ([crodriguez1a](https://github.com/crodriguez1a)) +- Activations [#316](https://github.com/knsv/mermaid/pull/316) ([ciekawy](https://github.com/ciekawy)) +- Support leading comments for sequenceDiagrams [#312](https://github.com/knsv/mermaid/pull/312) ([ashsearle](https://github.com/ashsearle)) +- Show a little lenience for white-space around names [#309](https://github.com/knsv/mermaid/pull/309) ([ashsearle](https://github.com/ashsearle)) +- Update list of downstream projects [#307](https://github.com/knsv/mermaid/pull/307) ([maxArturo](https://github.com/maxArturo)) +- Issue 299: Sequence diagram Loops: changing boxMargin spoils the "loop" notation [#300](https://github.com/knsv/mermaid/pull/300) ([LarryKlugerDS](https://github.com/LarryKlugerDS)) +- Issue 297 - src/mermaid.js generates bad code [#298](https://github.com/knsv/mermaid/pull/298) ([LarryKlugerDS](https://github.com/LarryKlugerDS)) +- Updated instructions for running tests [#295](https://github.com/knsv/mermaid/pull/295) ([LarryKlugerDS](https://github.com/LarryKlugerDS)) +- Add Markdown Plus to Downstream projects [#288](https://github.com/knsv/mermaid/pull/288) ([tylerlong](https://github.com/tylerlong)) +- Quote phantomPath so that it doesn't fail on window [#286](https://github.com/knsv/mermaid/pull/286) ([raghur](https://github.com/raghur)) ## [0.5.8](https://github.com/knsv/mermaid/tree/0.5.8) (2016-01-27) @@ -528,21 +528,21 @@ mermaidAPI.initialize({ **Closed issues:** -- Mermaid + LightPaper = ❤️ [#280](https://github.com/knsv/mermaid/issues/280) -- Bower Integration [#278](https://github.com/knsv/mermaid/issues/278) -- Mermaid breaks when variables end in 'v' [#276](https://github.com/knsv/mermaid/issues/276) -- sequence diagrams don't support participant aliasing [#263](https://github.com/knsv/mermaid/issues/263) -- One diagram that fails to render stops further execution on the page [#259](https://github.com/knsv/mermaid/issues/259) -- Where to find line layout algorithm? [#258](https://github.com/knsv/mermaid/issues/258) -- Compatibility with node.js [#257](https://github.com/knsv/mermaid/issues/257) -- Label resizing with dynamically loaded fonts [#255](https://github.com/knsv/mermaid/issues/255) -- SVG arrowheads are broken in the CLI [#249](https://github.com/knsv/mermaid/issues/249) -- Cannot read property 'replace' of undefined [#239](https://github.com/knsv/mermaid/issues/239) +- Mermaid + LightPaper = ❤️ [#280](https://github.com/knsv/mermaid/issues/280) +- Bower Integration [#278](https://github.com/knsv/mermaid/issues/278) +- Mermaid breaks when variables end in 'v' [#276](https://github.com/knsv/mermaid/issues/276) +- sequence diagrams don't support participant aliasing [#263](https://github.com/knsv/mermaid/issues/263) +- One diagram that fails to render stops further execution on the page [#259](https://github.com/knsv/mermaid/issues/259) +- Where to find line layout algorithm? [#258](https://github.com/knsv/mermaid/issues/258) +- Compatibility with node.js [#257](https://github.com/knsv/mermaid/issues/257) +- Label resizing with dynamically loaded fonts [#255](https://github.com/knsv/mermaid/issues/255) +- SVG arrowheads are broken in the CLI [#249](https://github.com/knsv/mermaid/issues/249) +- Cannot read property 'replace' of undefined [#239](https://github.com/knsv/mermaid/issues/239) **Merged pull requests:** -- gh-50 Allow styling of edge labels in css [#267](https://github.com/knsv/mermaid/pull/267) ([Anoia](https://github.com/Anoia)) -- Allow sequenceDiagram participant aliasing [#265](https://github.com/knsv/mermaid/pull/265) ([gibson042](https://github.com/gibson042)) +- gh-50 Allow styling of edge labels in css [#267](https://github.com/knsv/mermaid/pull/267) ([Anoia](https://github.com/Anoia)) +- Allow sequenceDiagram participant aliasing [#265](https://github.com/knsv/mermaid/pull/265) ([gibson042](https://github.com/gibson042)) ## [0.5.6](https://github.com/knsv/mermaid/tree/0.5.6) (2015-11-22) @@ -550,36 +550,36 @@ mermaidAPI.initialize({ **Implemented enhancements:** -- Add download SVG link to the live editor [#144](https://github.com/knsv/mermaid/issues/144) +- Add download SVG link to the live editor [#144](https://github.com/knsv/mermaid/issues/144) **Fixed bugs:** -- Live Editor: Permalink address not being parsed [#202](https://github.com/knsv/mermaid/issues/202) +- Live Editor: Permalink address not being parsed [#202](https://github.com/knsv/mermaid/issues/202) **Closed issues:** -- title doesn't work in sequenceDiagram [#248](https://github.com/knsv/mermaid/issues/248) -- hypen-minus should be valid in sequence diagram alt/else/etc. descriptions [#247](https://github.com/knsv/mermaid/issues/247) -- Broken in firefox? [#245](https://github.com/knsv/mermaid/issues/245) -- When there is a Chinese symbol in the flowchart, it will crash。 [#238](https://github.com/knsv/mermaid/issues/238) -- Non-alpha characters included in ALPHA token (flow graph jison) [#232](https://github.com/knsv/mermaid/issues/232) -- subgraph not rendering with change to sample [#231](https://github.com/knsv/mermaid/issues/231) -- sequence diagram requires a new line at the end? [#229](https://github.com/knsv/mermaid/issues/229) +- title doesn't work in sequenceDiagram [#248](https://github.com/knsv/mermaid/issues/248) +- hypen-minus should be valid in sequence diagram alt/else/etc. descriptions [#247](https://github.com/knsv/mermaid/issues/247) +- Broken in firefox? [#245](https://github.com/knsv/mermaid/issues/245) +- When there is a Chinese symbol in the flowchart, it will crash。 [#238](https://github.com/knsv/mermaid/issues/238) +- Non-alpha characters included in ALPHA token (flow graph jison) [#232](https://github.com/knsv/mermaid/issues/232) +- subgraph not rendering with change to sample [#231](https://github.com/knsv/mermaid/issues/231) +- sequence diagram requires a new line at the end? [#229](https://github.com/knsv/mermaid/issues/229) **Merged pull requests:** -- Make sequenceDiagram terminal newline optional [#253](https://github.com/knsv/mermaid/pull/253) ([gibson042](https://github.com/gibson042)) -- Support sequenceDiagram "over" notes [#252](https://github.com/knsv/mermaid/pull/252) ([gibson042](https://github.com/gibson042)) -- Properly handle "rest of line" statements [#251](https://github.com/knsv/mermaid/pull/251) ([gibson042](https://github.com/gibson042)) -- CLI: Propagate exit code from lib (i.e., phantomjs) [#250](https://github.com/knsv/mermaid/pull/250) ([gibson042](https://github.com/gibson042)) -- flowRender.js - Fix FontAwesome icon insert [#244](https://github.com/knsv/mermaid/pull/244) ([ma-zal](https://github.com/ma-zal)) -- updated sequence diagram link in live editor [#242](https://github.com/knsv/mermaid/pull/242) ([r-a-v-a-s](https://github.com/r-a-v-a-s)) -- updated links in README.md [#240](https://github.com/knsv/mermaid/pull/240) ([r-a-v-a-s](https://github.com/r-a-v-a-s)) -- Ellipse syntax [#237](https://github.com/knsv/mermaid/pull/237) ([spect88](https://github.com/spect88)) -- Allow keywords as suffixes of node ids [#235](https://github.com/knsv/mermaid/pull/235) ([spect88](https://github.com/spect88)) -- Highlighted the editor in the nav [#234](https://github.com/knsv/mermaid/pull/234) ([knsv](https://github.com/knsv)) -- Live editor tweaks [#233](https://github.com/knsv/mermaid/pull/233) ([spect88](https://github.com/spect88)) -- Add a Gitter chat badge to README.md [#230](https://github.com/knsv/mermaid/pull/230) ([gitter-badger](https://github.com/gitter-badger)) +- Make sequenceDiagram terminal newline optional [#253](https://github.com/knsv/mermaid/pull/253) ([gibson042](https://github.com/gibson042)) +- Support sequenceDiagram "over" notes [#252](https://github.com/knsv/mermaid/pull/252) ([gibson042](https://github.com/gibson042)) +- Properly handle "rest of line" statements [#251](https://github.com/knsv/mermaid/pull/251) ([gibson042](https://github.com/gibson042)) +- CLI: Propagate exit code from lib (i.e., phantomjs) [#250](https://github.com/knsv/mermaid/pull/250) ([gibson042](https://github.com/gibson042)) +- flowRender.js - Fix FontAwesome icon insert [#244](https://github.com/knsv/mermaid/pull/244) ([ma-zal](https://github.com/ma-zal)) +- updated sequence diagram link in live editor [#242](https://github.com/knsv/mermaid/pull/242) ([r-a-v-a-s](https://github.com/r-a-v-a-s)) +- updated links in README.md [#240](https://github.com/knsv/mermaid/pull/240) ([r-a-v-a-s](https://github.com/r-a-v-a-s)) +- Ellipse syntax [#237](https://github.com/knsv/mermaid/pull/237) ([spect88](https://github.com/spect88)) +- Allow keywords as suffixes of node ids [#235](https://github.com/knsv/mermaid/pull/235) ([spect88](https://github.com/spect88)) +- Highlighted the editor in the nav [#234](https://github.com/knsv/mermaid/pull/234) ([knsv](https://github.com/knsv)) +- Live editor tweaks [#233](https://github.com/knsv/mermaid/pull/233) ([spect88](https://github.com/spect88)) +- Add a Gitter chat badge to README.md [#230](https://github.com/knsv/mermaid/pull/230) ([gitter-badger](https://github.com/gitter-badger)) ## [0.5.5](https://github.com/knsv/mermaid/tree/0.5.5) (2015-10-21) @@ -587,11 +587,11 @@ mermaidAPI.initialize({ **Closed issues:** -- sequence diagram, arrowhead instead of crosshead [#227](https://github.com/knsv/mermaid/issues/227) +- sequence diagram, arrowhead instead of crosshead [#227](https://github.com/knsv/mermaid/issues/227) **Merged pull requests:** -- Fix a typo: crosshead --> arrowhead [#228](https://github.com/knsv/mermaid/pull/228) ([tylerlong](https://github.com/tylerlong)) +- Fix a typo: crosshead --> arrowhead [#228](https://github.com/knsv/mermaid/pull/228) ([tylerlong](https://github.com/tylerlong)) ## [0.5.4](https://github.com/knsv/mermaid/tree/0.5.4) (2015-10-19) @@ -599,25 +599,25 @@ mermaidAPI.initialize({ **Implemented enhancements:** -- Set log level from mermaid configuration [#220](https://github.com/knsv/mermaid/issues/220) -- Links in sequence diagrams [#159](https://github.com/knsv/mermaid/issues/159) -- Add syntax for double headed arrows [#123](https://github.com/knsv/mermaid/issues/123) +- Set log level from mermaid configuration [#220](https://github.com/knsv/mermaid/issues/220) +- Links in sequence diagrams [#159](https://github.com/knsv/mermaid/issues/159) +- Add syntax for double headed arrows [#123](https://github.com/knsv/mermaid/issues/123) **Fixed bugs:** -- comment characters `%%` cause parse error [#141](https://github.com/knsv/mermaid/issues/141) +- comment characters `%%` cause parse error [#141](https://github.com/knsv/mermaid/issues/141) **Closed issues:** -- Marker-end arrow cannot be shown for URL with query parameter [#225](https://github.com/knsv/mermaid/issues/225) -- Please update bower's D3 version [#221](https://github.com/knsv/mermaid/issues/221) -- Width fixed to 400px [#204](https://github.com/knsv/mermaid/issues/204) -- render to png from the cli does not display the marker-end arrow heads [#181](https://github.com/knsv/mermaid/issues/181) +- Marker-end arrow cannot be shown for URL with query parameter [#225](https://github.com/knsv/mermaid/issues/225) +- Please update bower's D3 version [#221](https://github.com/knsv/mermaid/issues/221) +- Width fixed to 400px [#204](https://github.com/knsv/mermaid/issues/204) +- render to png from the cli does not display the marker-end arrow heads [#181](https://github.com/knsv/mermaid/issues/181) **Merged pull requests:** -- Allow `end` as a substring of vertex id [#224](https://github.com/knsv/mermaid/pull/224) ([spect88](https://github.com/spect88)) -- Remove duplicate npm dependencies: d3 and he [#223](https://github.com/knsv/mermaid/pull/223) ([spect88](https://github.com/spect88)) +- Allow `end` as a substring of vertex id [#224](https://github.com/knsv/mermaid/pull/224) ([spect88](https://github.com/spect88)) +- Remove duplicate npm dependencies: d3 and he [#223](https://github.com/knsv/mermaid/pull/223) ([spect88](https://github.com/spect88)) ## [0.5.3](https://github.com/knsv/mermaid/tree/0.5.3) (2015-10-04) @@ -629,52 +629,52 @@ mermaidAPI.initialize({ **Implemented enhancements:** -- Support for hyperlink and tooltip [#34](https://github.com/knsv/mermaid/issues/34) +- Support for hyperlink and tooltip [#34](https://github.com/knsv/mermaid/issues/34) **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:** -- Update flowchart.md [#214](https://github.com/knsv/mermaid/pull/214) ([orschiro](https://github.com/orschiro)) -- Default style when using the CLI [#205](https://github.com/knsv/mermaid/pull/205) ([gillesdemey](https://github.com/gillesdemey)) -- Gantt chart - add minutes and seconds durations [#198](https://github.com/knsv/mermaid/pull/198) ([dbrans](https://github.com/dbrans)) -- Using QUnit for AMD testing [#190](https://github.com/knsv/mermaid/pull/190) ([bollwyvl](https://github.com/bollwyvl)) -- Update phantomscript.js [#182](https://github.com/knsv/mermaid/pull/182) ([phairow](https://github.com/phairow)) +- Update flowchart.md [#214](https://github.com/knsv/mermaid/pull/214) ([orschiro](https://github.com/orschiro)) +- Default style when using the CLI [#205](https://github.com/knsv/mermaid/pull/205) ([gillesdemey](https://github.com/gillesdemey)) +- Gantt chart - add minutes and seconds durations [#198](https://github.com/knsv/mermaid/pull/198) ([dbrans](https://github.com/dbrans)) +- Using QUnit for AMD testing [#190](https://github.com/knsv/mermaid/pull/190) ([bollwyvl](https://github.com/bollwyvl)) +- Update phantomscript.js [#182](https://github.com/knsv/mermaid/pull/182) ([phairow](https://github.com/phairow)) ## [0.5.1](https://github.com/knsv/mermaid/tree/0.5.1) (2015-06-21) @@ -682,36 +682,36 @@ mermaidAPI.initialize({ **Implemented enhancements:** -- To SVG Export [#146](https://github.com/knsv/mermaid/issues/146) -- Possibility to set the width of the generated flowchart [#129](https://github.com/knsv/mermaid/issues/129) -- Special characters break parsing [#54](https://github.com/knsv/mermaid/issues/54) -- Responsive graph layout for mobile viewers [#51](https://github.com/knsv/mermaid/issues/51) -- Styling connector lines [#31](https://github.com/knsv/mermaid/issues/31) +- To SVG Export [#146](https://github.com/knsv/mermaid/issues/146) +- Possibility to set the width of the generated flowchart [#129](https://github.com/knsv/mermaid/issues/129) +- Special characters break parsing [#54](https://github.com/knsv/mermaid/issues/54) +- Responsive graph layout for mobile viewers [#51](https://github.com/knsv/mermaid/issues/51) +- Styling connector lines [#31](https://github.com/knsv/mermaid/issues/31) **Fixed bugs:** -- flowchart - styling of edges via css overrides specific styles set in the graph definition [#128](https://github.com/knsv/mermaid/issues/128) +- flowchart - styling of edges via css overrides specific styles set in the graph definition [#128](https://github.com/knsv/mermaid/issues/128) **Closed issues:** -- Live editor is broken [#173](https://github.com/knsv/mermaid/issues/173) -- 0.5.0 no longer respects custom date definitions in Gantt diagrams [#171](https://github.com/knsv/mermaid/issues/171) -- Drop label character restrictions [#162](https://github.com/knsv/mermaid/issues/162) -- can't nest subgraphs in flowchart [#161](https://github.com/knsv/mermaid/issues/161) -- Unable to generate gantt diagram with mermaid CLI [#158](https://github.com/knsv/mermaid/issues/158) -- Inline css by "mermaid" [#157](https://github.com/knsv/mermaid/issues/157) -- Finite State Machine Diagram [#152](https://github.com/knsv/mermaid/issues/152) -- How to center align gantt diagram [#150](https://github.com/knsv/mermaid/issues/150) -- Security concern regarding class definition [#148](https://github.com/knsv/mermaid/issues/148) -- File Extension [#147](https://github.com/knsv/mermaid/issues/147) -- `setTimeout` with clusters problematic with programmatic edits and no callback [#133](https://github.com/knsv/mermaid/issues/133) -- module.exports.cloneCssStyles() in combination with Angularjs breaks display in Chrome and IE [#126](https://github.com/knsv/mermaid/issues/126) -- Gantt - suitable xAxis for longer project [#125](https://github.com/knsv/mermaid/issues/125) -- How to get started with this project ? [#64](https://github.com/knsv/mermaid/issues/64) +- Live editor is broken [#173](https://github.com/knsv/mermaid/issues/173) +- 0.5.0 no longer respects custom date definitions in Gantt diagrams [#171](https://github.com/knsv/mermaid/issues/171) +- Drop label character restrictions [#162](https://github.com/knsv/mermaid/issues/162) +- can't nest subgraphs in flowchart [#161](https://github.com/knsv/mermaid/issues/161) +- Unable to generate gantt diagram with mermaid CLI [#158](https://github.com/knsv/mermaid/issues/158) +- Inline css by "mermaid" [#157](https://github.com/knsv/mermaid/issues/157) +- Finite State Machine Diagram [#152](https://github.com/knsv/mermaid/issues/152) +- How to center align gantt diagram [#150](https://github.com/knsv/mermaid/issues/150) +- Security concern regarding class definition [#148](https://github.com/knsv/mermaid/issues/148) +- File Extension [#147](https://github.com/knsv/mermaid/issues/147) +- `setTimeout` with clusters problematic with programmatic edits and no callback [#133](https://github.com/knsv/mermaid/issues/133) +- module.exports.cloneCssStyles() in combination with Angularjs breaks display in Chrome and IE [#126](https://github.com/knsv/mermaid/issues/126) +- Gantt - suitable xAxis for longer project [#125](https://github.com/knsv/mermaid/issues/125) +- How to get started with this project ? [#64](https://github.com/knsv/mermaid/issues/64) **Merged pull requests:** -- Remove moot `version` property from bower.json [#172](https://github.com/knsv/mermaid/pull/172) ([kkirsche](https://github.com/kkirsche)) +- Remove moot `version` property from bower.json [#172](https://github.com/knsv/mermaid/pull/172) ([kkirsche](https://github.com/kkirsche)) ## [0.5.0](https://github.com/knsv/mermaid/tree/0.5.0) (2015-06-07) @@ -719,35 +719,35 @@ mermaidAPI.initialize({ **Implemented enhancements:** -- Add a css file, mermaid.css, with default styling [#122](https://github.com/knsv/mermaid/issues/122) -- software architecture diagram [#36](https://github.com/knsv/mermaid/issues/36) -- Support for bar charts and pie diagrams [#22](https://github.com/knsv/mermaid/issues/22) +- Add a css file, mermaid.css, with default styling [#122](https://github.com/knsv/mermaid/issues/122) +- software architecture diagram [#36](https://github.com/knsv/mermaid/issues/36) +- Support for bar charts and pie diagrams [#22](https://github.com/knsv/mermaid/issues/22) **Closed issues:** -- uglifyjs wanrings which means we can improve the code [#156](https://github.com/knsv/mermaid/issues/156) -- New(er) features unavailable in downloadable js files? [#151](https://github.com/knsv/mermaid/issues/151) -- Add gh-gapes link to description [#143](https://github.com/knsv/mermaid/issues/143) -- Some examples not displayed on Firefox 36.0.1 [#138](https://github.com/knsv/mermaid/issues/138) -- tags ending in a "v" don't render [#132](https://github.com/knsv/mermaid/issues/132) -- Links in flowchart [#131](https://github.com/knsv/mermaid/issues/131) -- Using the library for iOS development [#130](https://github.com/knsv/mermaid/issues/130) -- Add capability for gantt diagrams [#118](https://github.com/knsv/mermaid/issues/118) -- lower case v causes error in the parser [#108](https://github.com/knsv/mermaid/issues/108) -- Label's css conflict with boostrap's .label [#67](https://github.com/knsv/mermaid/issues/67) -- TypeError: Cannot read property 'layout' of undefined [#37](https://github.com/knsv/mermaid/issues/37) +- uglifyjs wanrings which means we can improve the code [#156](https://github.com/knsv/mermaid/issues/156) +- New(er) features unavailable in downloadable js files? [#151](https://github.com/knsv/mermaid/issues/151) +- Add gh-gapes link to description [#143](https://github.com/knsv/mermaid/issues/143) +- Some examples not displayed on Firefox 36.0.1 [#138](https://github.com/knsv/mermaid/issues/138) +- tags ending in a "v" don't render [#132](https://github.com/knsv/mermaid/issues/132) +- Links in flowchart [#131](https://github.com/knsv/mermaid/issues/131) +- Using the library for iOS development [#130](https://github.com/knsv/mermaid/issues/130) +- Add capability for gantt diagrams [#118](https://github.com/knsv/mermaid/issues/118) +- lower case v causes error in the parser [#108](https://github.com/knsv/mermaid/issues/108) +- Label's css conflict with boostrap's .label [#67](https://github.com/knsv/mermaid/issues/67) +- TypeError: Cannot read property 'layout' of undefined [#37](https://github.com/knsv/mermaid/issues/37) **Merged pull requests:** -- Dev 0.5.0 [#168](https://github.com/knsv/mermaid/pull/168) ([knsv](https://github.com/knsv)) -- Fix spacing [#164](https://github.com/knsv/mermaid/pull/164) ([rhcarvalho](https://github.com/rhcarvalho)) -- Fixing typo: "Think" -> "Thick" [#160](https://github.com/knsv/mermaid/pull/160) ([it0a](https://github.com/it0a)) -- IE, local html, cssRules access is denied [#155](https://github.com/knsv/mermaid/pull/155) ([tylerlong](https://github.com/tylerlong)) -- Add automatically generated change log file. [#139](https://github.com/knsv/mermaid/pull/139) ([skywinder](https://github.com/skywinder)) -- Adding init argument to the global API [#137](https://github.com/knsv/mermaid/pull/137) ([bollwyvl](https://github.com/bollwyvl)) -- Add description of manual calling of init [#136](https://github.com/knsv/mermaid/pull/136) ([bollwyvl](https://github.com/bollwyvl)) -- Allow other forms of node selection for init() [#135](https://github.com/knsv/mermaid/pull/135) ([bollwyvl](https://github.com/bollwyvl)) -- Use a library-level variable for assigning ids [#134](https://github.com/knsv/mermaid/pull/134) ([bollwyvl](https://github.com/bollwyvl)) +- Dev 0.5.0 [#168](https://github.com/knsv/mermaid/pull/168) ([knsv](https://github.com/knsv)) +- Fix spacing [#164](https://github.com/knsv/mermaid/pull/164) ([rhcarvalho](https://github.com/rhcarvalho)) +- Fixing typo: "Think" -> "Thick" [#160](https://github.com/knsv/mermaid/pull/160) ([it0a](https://github.com/it0a)) +- IE, local html, cssRules access is denied [#155](https://github.com/knsv/mermaid/pull/155) ([tylerlong](https://github.com/tylerlong)) +- Add automatically generated change log file. [#139](https://github.com/knsv/mermaid/pull/139) ([skywinder](https://github.com/skywinder)) +- Adding init argument to the global API [#137](https://github.com/knsv/mermaid/pull/137) ([bollwyvl](https://github.com/bollwyvl)) +- Add description of manual calling of init [#136](https://github.com/knsv/mermaid/pull/136) ([bollwyvl](https://github.com/bollwyvl)) +- Allow other forms of node selection for init() [#135](https://github.com/knsv/mermaid/pull/135) ([bollwyvl](https://github.com/bollwyvl)) +- Use a library-level variable for assigning ids [#134](https://github.com/knsv/mermaid/pull/134) ([bollwyvl](https://github.com/bollwyvl)) ## [0.4.0](https://github.com/knsv/mermaid/tree/0.4.0) (2015-03-01) @@ -755,18 +755,18 @@ mermaidAPI.initialize({ **Implemented enhancements:** -- Assymetric shapes not documented [#82](https://github.com/knsv/mermaid/issues/82) -- Improve arrows [#3](https://github.com/knsv/mermaid/issues/3) +- Assymetric shapes not documented [#82](https://github.com/knsv/mermaid/issues/82) +- Improve arrows [#3](https://github.com/knsv/mermaid/issues/3) **Fixed bugs:** -- NoModificationAllowedError [#23](https://github.com/knsv/mermaid/issues/23) +- NoModificationAllowedError [#23](https://github.com/knsv/mermaid/issues/23) **Closed issues:** -- subgraph background is black in rendered flowchart PNG via CLI [#121](https://github.com/knsv/mermaid/issues/121) -- Integrate editor at https://github.com/naseer/mermaid-webapp [#110](https://github.com/knsv/mermaid/issues/110) -- Internet Explorer Support [#99](https://github.com/knsv/mermaid/issues/99) +- subgraph background is black in rendered flowchart PNG via CLI [#121](https://github.com/knsv/mermaid/issues/121) +- Integrate editor at https://github.com/naseer/mermaid-webapp [#110](https://github.com/knsv/mermaid/issues/110) +- Internet Explorer Support [#99](https://github.com/knsv/mermaid/issues/99) ## [0.3.5](https://github.com/knsv/mermaid/tree/0.3.5) (2015-02-15) @@ -778,30 +778,30 @@ mermaidAPI.initialize({ **Implemented enhancements:** -- Apply styling from css when using the CLI utility [#85](https://github.com/knsv/mermaid/issues/85) -- Generated SVG works poorly outside web browsers [#58](https://github.com/knsv/mermaid/issues/58) -- Generating SVG text blob for use in Node [#2](https://github.com/knsv/mermaid/issues/2) +- Apply styling from css when using the CLI utility [#85](https://github.com/knsv/mermaid/issues/85) +- Generated SVG works poorly outside web browsers [#58](https://github.com/knsv/mermaid/issues/58) +- Generating SVG text blob for use in Node [#2](https://github.com/knsv/mermaid/issues/2) **Closed issues:** -- Subgraph syntax bug? [#120](https://github.com/knsv/mermaid/issues/120) -- Live editor [#115](https://github.com/knsv/mermaid/issues/115) -- Error in "Basic Syntax" wiki page [#113](https://github.com/knsv/mermaid/issues/113) -- semicolons, anyone? [#111](https://github.com/knsv/mermaid/issues/111) -- undefined `sequenceConfig` fails [#109](https://github.com/knsv/mermaid/issues/109) -- Sequence Diagrams: Show Actors below as well [#106](https://github.com/knsv/mermaid/issues/106) -- Allow overriding sequence diagram configuration (SVG properties) [#103](https://github.com/knsv/mermaid/issues/103) -- Error when rendering A-- This is the text -- B [#102](https://github.com/knsv/mermaid/issues/102) -- Clipping in documentation [#97](https://github.com/knsv/mermaid/issues/97) -- isolate class styling to the svg container [#92](https://github.com/knsv/mermaid/issues/92) -- Make the new graph declaration more visual [#40](https://github.com/knsv/mermaid/issues/40) +- Subgraph syntax bug? [#120](https://github.com/knsv/mermaid/issues/120) +- Live editor [#115](https://github.com/knsv/mermaid/issues/115) +- Error in "Basic Syntax" wiki page [#113](https://github.com/knsv/mermaid/issues/113) +- semicolons, anyone? [#111](https://github.com/knsv/mermaid/issues/111) +- undefined `sequenceConfig` fails [#109](https://github.com/knsv/mermaid/issues/109) +- Sequence Diagrams: Show Actors below as well [#106](https://github.com/knsv/mermaid/issues/106) +- Allow overriding sequence diagram configuration (SVG properties) [#103](https://github.com/knsv/mermaid/issues/103) +- Error when rendering A-- This is the text -- B [#102](https://github.com/knsv/mermaid/issues/102) +- Clipping in documentation [#97](https://github.com/knsv/mermaid/issues/97) +- isolate class styling to the svg container [#92](https://github.com/knsv/mermaid/issues/92) +- Make the new graph declaration more visual [#40](https://github.com/knsv/mermaid/issues/40) **Merged pull requests:** -- Add live editor [#119](https://github.com/knsv/mermaid/pull/119) ([naseer](https://github.com/naseer)) -- Adds CSS option to the CLI [#116](https://github.com/knsv/mermaid/pull/116) ([fardog](https://github.com/fardog)) -- Update flowchart.md in response Issue #113 [#114](https://github.com/knsv/mermaid/pull/114) ([vijay40](https://github.com/vijay40)) -- Ignore all files except the license and dist/ folder when installing with Bower. [#112](https://github.com/knsv/mermaid/pull/112) ([jasonbellamy](https://github.com/jasonbellamy)) +- Add live editor [#119](https://github.com/knsv/mermaid/pull/119) ([naseer](https://github.com/naseer)) +- Adds CSS option to the CLI [#116](https://github.com/knsv/mermaid/pull/116) ([fardog](https://github.com/fardog)) +- Update flowchart.md in response Issue #113 [#114](https://github.com/knsv/mermaid/pull/114) ([vijay40](https://github.com/vijay40)) +- Ignore all files except the license and dist/ folder when installing with Bower. [#112](https://github.com/knsv/mermaid/pull/112) ([jasonbellamy](https://github.com/jasonbellamy)) ## [0.3.3](https://github.com/knsv/mermaid/tree/0.3.3) (2015-01-25) @@ -809,20 +809,20 @@ mermaidAPI.initialize({ **Implemented enhancements:** -- Support for dotted links [#26](https://github.com/knsv/mermaid/issues/26) +- Support for dotted links [#26](https://github.com/knsv/mermaid/issues/26) **Closed issues:** -- Missing arrows in sequence diagram [#98](https://github.com/knsv/mermaid/issues/98) -- Error with >9 linkStyles [#95](https://github.com/knsv/mermaid/issues/95) +- Missing arrows in sequence diagram [#98](https://github.com/knsv/mermaid/issues/98) +- Error with >9 linkStyles [#95](https://github.com/knsv/mermaid/issues/95) **Merged pull requests:** -- Require d3 directly to better support Node usage [#107](https://github.com/knsv/mermaid/pull/107) ([markdalgleish](https://github.com/markdalgleish)) -- update doc with -c option [#105](https://github.com/knsv/mermaid/pull/105) ([jjmr](https://github.com/jjmr)) -- Add new parameter to the console client to override the svg configuration in sequence diagrams [#104](https://github.com/knsv/mermaid/pull/104) ([jjmr](https://github.com/jjmr)) -- Text based labels, new shape [#101](https://github.com/knsv/mermaid/pull/101) ([bjowes](https://github.com/bjowes)) -- fix html tags in example usage [#100](https://github.com/knsv/mermaid/pull/100) ([deiwin](https://github.com/deiwin)) +- Require d3 directly to better support Node usage [#107](https://github.com/knsv/mermaid/pull/107) ([markdalgleish](https://github.com/markdalgleish)) +- update doc with -c option [#105](https://github.com/knsv/mermaid/pull/105) ([jjmr](https://github.com/jjmr)) +- Add new parameter to the console client to override the svg configuration in sequence diagrams [#104](https://github.com/knsv/mermaid/pull/104) ([jjmr](https://github.com/jjmr)) +- Text based labels, new shape [#101](https://github.com/knsv/mermaid/pull/101) ([bjowes](https://github.com/bjowes)) +- fix html tags in example usage [#100](https://github.com/knsv/mermaid/pull/100) ([deiwin](https://github.com/deiwin)) ## [0.3.2](https://github.com/knsv/mermaid/tree/0.3.2) (2015-01-11) @@ -830,22 +830,22 @@ mermaidAPI.initialize({ **Implemented enhancements:** -- Make link text look like it is on the line [#53](https://github.com/knsv/mermaid/issues/53) +- Make link text look like it is on the line [#53](https://github.com/knsv/mermaid/issues/53) **Closed issues:** -- disable auto render [#91](https://github.com/knsv/mermaid/issues/91) -- Tidy breaks mermaid (linebreaks in \
) [#87](https://github.com/knsv/mermaid/issues/87) -- Bug: \
being rendered as text in node [#73](https://github.com/knsv/mermaid/issues/73) -- Graph edges appear to render outside of the canvas [#70](https://github.com/knsv/mermaid/issues/70) +- disable auto render [#91](https://github.com/knsv/mermaid/issues/91) +- Tidy breaks mermaid (linebreaks in \
) [#87](https://github.com/knsv/mermaid/issues/87) +- Bug: \
being rendered as text in node [#73](https://github.com/knsv/mermaid/issues/73) +- Graph edges appear to render outside of the canvas [#70](https://github.com/knsv/mermaid/issues/70) **Merged pull requests:** -- Merge pull request #1 from knsv/master [#96](https://github.com/knsv/mermaid/pull/96) ([gkchic](https://github.com/gkchic)) -- Removed duplicated section in flowchart docs [#94](https://github.com/knsv/mermaid/pull/94) ([kaime](https://github.com/kaime)) -- Grammar changes to sequence page [#93](https://github.com/knsv/mermaid/pull/93) ([gkchic](https://github.com/gkchic)) -- Github buttons [#89](https://github.com/knsv/mermaid/pull/89) ([gkchic](https://github.com/gkchic)) -- Template change [#88](https://github.com/knsv/mermaid/pull/88) ([gkchic](https://github.com/gkchic)) +- Merge pull request #1 from knsv/master [#96](https://github.com/knsv/mermaid/pull/96) ([gkchic](https://github.com/gkchic)) +- Removed duplicated section in flowchart docs [#94](https://github.com/knsv/mermaid/pull/94) ([kaime](https://github.com/kaime)) +- Grammar changes to sequence page [#93](https://github.com/knsv/mermaid/pull/93) ([gkchic](https://github.com/gkchic)) +- Github buttons [#89](https://github.com/knsv/mermaid/pull/89) ([gkchic](https://github.com/gkchic)) +- Template change [#88](https://github.com/knsv/mermaid/pull/88) ([gkchic](https://github.com/gkchic)) ## [0.3.1](https://github.com/knsv/mermaid/tree/0.3.1) (2015-01-05) @@ -853,22 +853,22 @@ mermaidAPI.initialize({ **Implemented enhancements:** -- Support for sequence diagrams [#16](https://github.com/knsv/mermaid/issues/16) -- Client utility for mermaid [#6](https://github.com/knsv/mermaid/issues/6) +- Support for sequence diagrams [#16](https://github.com/knsv/mermaid/issues/16) +- Client utility for mermaid [#6](https://github.com/knsv/mermaid/issues/6) **Closed issues:** -- Non ASCII chars in labels [#84](https://github.com/knsv/mermaid/issues/84) -- 'undefined' titles of Quicklinks on the usage page [#80](https://github.com/knsv/mermaid/issues/80) -- \[cli] Enhancement proposal: not fail --version / --help if phantomjs isn't installed [#71](https://github.com/knsv/mermaid/issues/71) +- Non ASCII chars in labels [#84](https://github.com/knsv/mermaid/issues/84) +- 'undefined' titles of Quicklinks on the usage page [#80](https://github.com/knsv/mermaid/issues/80) +- \[cli] Enhancement proposal: not fail --version / --help if phantomjs isn't installed [#71](https://github.com/knsv/mermaid/issues/71) **Merged pull requests:** -- Flowchart doc: Text in the circle now in a circle [#81](https://github.com/knsv/mermaid/pull/81) ([Grahack](https://github.com/Grahack)) -- Fix for issue #73 [#79](https://github.com/knsv/mermaid/pull/79) ([it0a](https://github.com/it0a)) -- Ink template [#78](https://github.com/knsv/mermaid/pull/78) ([gkchic](https://github.com/gkchic)) -- Show help and version even if phantom isn't present. Fixes #71 [#75](https://github.com/knsv/mermaid/pull/75) ([fardog](https://github.com/fardog)) -- Add apostrophe & 'and' [#72](https://github.com/knsv/mermaid/pull/72) ([sudodoki](https://github.com/sudodoki)) +- Flowchart doc: Text in the circle now in a circle [#81](https://github.com/knsv/mermaid/pull/81) ([Grahack](https://github.com/Grahack)) +- Fix for issue #73 [#79](https://github.com/knsv/mermaid/pull/79) ([it0a](https://github.com/it0a)) +- Ink template [#78](https://github.com/knsv/mermaid/pull/78) ([gkchic](https://github.com/gkchic)) +- Show help and version even if phantom isn't present. Fixes #71 [#75](https://github.com/knsv/mermaid/pull/75) ([fardog](https://github.com/fardog)) +- Add apostrophe & 'and' [#72](https://github.com/knsv/mermaid/pull/72) ([sudodoki](https://github.com/sudodoki)) ## [0.3.0](https://github.com/knsv/mermaid/tree/0.3.0) (2014-12-22) @@ -876,22 +876,22 @@ mermaidAPI.initialize({ **Implemented enhancements:** -- How do I do comments? [#47](https://github.com/knsv/mermaid/issues/47) -- Improve readability with new line as terminator and whitespace [#38](https://github.com/knsv/mermaid/issues/38) +- How do I do comments? [#47](https://github.com/knsv/mermaid/issues/47) +- Improve readability with new line as terminator and whitespace [#38](https://github.com/knsv/mermaid/issues/38) **Fixed bugs:** -- This characters failed the lexical parsing [#46](https://github.com/knsv/mermaid/issues/46) +- This characters failed the lexical parsing [#46](https://github.com/knsv/mermaid/issues/46) **Closed issues:** -- Trailing whitespace at the end of lines is not ignored [#55](https://github.com/knsv/mermaid/issues/55) -- Use classes instead of inline style for easy styling [#24](https://github.com/knsv/mermaid/issues/24) +- Trailing whitespace at the end of lines is not ignored [#55](https://github.com/knsv/mermaid/issues/55) +- Use classes instead of inline style for easy styling [#24](https://github.com/knsv/mermaid/issues/24) **Merged pull requests:** -- Adds Command Line Interface for generating PNGs from mermaid description files [#69](https://github.com/knsv/mermaid/pull/69) ([fardog](https://github.com/fardog)) -- Allow special symbols for direction along with acronyms [#66](https://github.com/knsv/mermaid/pull/66) ([vijay40](https://github.com/vijay40)) +- Adds Command Line Interface for generating PNGs from mermaid description files [#69](https://github.com/knsv/mermaid/pull/69) ([fardog](https://github.com/fardog)) +- Allow special symbols for direction along with acronyms [#66](https://github.com/knsv/mermaid/pull/66) ([vijay40](https://github.com/vijay40)) ## [0.2.16](https://github.com/knsv/mermaid/tree/0.2.16) (2014-12-15) @@ -899,25 +899,25 @@ mermaidAPI.initialize({ **Fixed bugs:** -- Lines routed outside visible area [#19](https://github.com/knsv/mermaid/issues/19) +- Lines routed outside visible area [#19](https://github.com/knsv/mermaid/issues/19) **Closed issues:** -- Mermaid not rendering properly on Wordpress pages [#59](https://github.com/knsv/mermaid/issues/59) -- Improve example page with live demo [#52](https://github.com/knsv/mermaid/issues/52) -- Does not render upon AngularJS Updates [#45](https://github.com/knsv/mermaid/issues/45) -- Download link in README.MD doesn't work. [#42](https://github.com/knsv/mermaid/issues/42) -- linkStyle usage is not obvious [#41](https://github.com/knsv/mermaid/issues/41) -- Move \*.spec.js in src/ to test/ [#35](https://github.com/knsv/mermaid/issues/35) +- Mermaid not rendering properly on Wordpress pages [#59](https://github.com/knsv/mermaid/issues/59) +- Improve example page with live demo [#52](https://github.com/knsv/mermaid/issues/52) +- Does not render upon AngularJS Updates [#45](https://github.com/knsv/mermaid/issues/45) +- Download link in README.MD doesn't work. [#42](https://github.com/knsv/mermaid/issues/42) +- linkStyle usage is not obvious [#41](https://github.com/knsv/mermaid/issues/41) +- Move \*.spec.js in src/ to test/ [#35](https://github.com/knsv/mermaid/issues/35) **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) @@ -925,19 +925,19 @@ mermaidAPI.initialize({ **Fixed bugs:** -- Error with some characters [#25](https://github.com/knsv/mermaid/issues/25) -- Cap-cased words break parser [#8](https://github.com/knsv/mermaid/issues/8) +- Error with some characters [#25](https://github.com/knsv/mermaid/issues/25) +- Cap-cased words break parser [#8](https://github.com/knsv/mermaid/issues/8) **Closed issues:** -- Question marks don't render properly with /dist/mermaid.full.min.js [#30](https://github.com/knsv/mermaid/issues/30) -- Provide parse function in browser widthout `require`? [#21](https://github.com/knsv/mermaid/issues/21) -- Better label text support [#18](https://github.com/knsv/mermaid/issues/18) +- Question marks don't render properly with /dist/mermaid.full.min.js [#30](https://github.com/knsv/mermaid/issues/30) +- Provide parse function in browser widthout `require`? [#21](https://github.com/knsv/mermaid/issues/21) +- Better label text support [#18](https://github.com/knsv/mermaid/issues/18) **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) @@ -949,14 +949,14 @@ mermaidAPI.initialize({ **Implemented enhancements:** -- Publish to NPM [#7](https://github.com/knsv/mermaid/issues/7) +- Publish to NPM [#7](https://github.com/knsv/mermaid/issues/7) **Closed issues:** -- modified init to be applied more than once [#29](https://github.com/knsv/mermaid/issues/29) -- Wanted to know build process for the project. [#28](https://github.com/knsv/mermaid/issues/28) -- can not support Chinese description [#20](https://github.com/knsv/mermaid/issues/20) -- Support unicode chars in labels [#9](https://github.com/knsv/mermaid/issues/9) +- modified init to be applied more than once [#29](https://github.com/knsv/mermaid/issues/29) +- Wanted to know build process for the project. [#28](https://github.com/knsv/mermaid/issues/28) +- can not support Chinese description [#20](https://github.com/knsv/mermaid/issues/20) +- Support unicode chars in labels [#9](https://github.com/knsv/mermaid/issues/9) ## [0.2.10](https://github.com/knsv/mermaid/tree/0.2.10) (2014-12-01) @@ -968,12 +968,12 @@ mermaidAPI.initialize({ **Closed issues:** -- Add link to jsbin playground to README [#11](https://github.com/knsv/mermaid/issues/11) -- What are the requirements ? [#10](https://github.com/knsv/mermaid/issues/10) +- Add link to jsbin playground to README [#11](https://github.com/knsv/mermaid/issues/11) +- What are the requirements ? [#10](https://github.com/knsv/mermaid/issues/10) **Merged pull requests:** -- Allow unicode chars in labels [#13](https://github.com/knsv/mermaid/pull/13) ([codebeige](https://github.com/codebeige)) +- Allow unicode chars in labels [#13](https://github.com/knsv/mermaid/pull/13) ([codebeige](https://github.com/codebeige)) ## [0.2.8](https://github.com/knsv/mermaid/tree/0.2.8) (2014-12-01) @@ -985,7 +985,7 @@ mermaidAPI.initialize({ **Closed issues:** -- Provide parser as separate module [#4](https://github.com/knsv/mermaid/issues/4) +- Provide parser as separate module [#4](https://github.com/knsv/mermaid/issues/4) ## [0.2.6](https://github.com/knsv/mermaid/tree/0.2.6) (2014-11-27) @@ -997,7 +997,7 @@ mermaidAPI.initialize({ **Merged pull requests:** -- Added new shapes! [#1](https://github.com/knsv/mermaid/pull/1) ([bjowes](https://github.com/bjowes)) +- Added new shapes! [#1](https://github.com/knsv/mermaid/pull/1) ([bjowes](https://github.com/bjowes)) ## [0.2.4](https://github.com/knsv/mermaid/tree/0.2.4) (2014-11-25) diff --git a/docs/README.md b/docs/README.md index 9fad3bcdf..9e149dfdb 100644 --- a/docs/README.md +++ b/docs/README.md @@ -204,7 +204,7 @@ To Deploy Mermaid: ```html ``` @@ -214,10 +214,10 @@ To Deploy Mermaid: ## Sibling projects -- [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor) -- [Mermaid CLI](https://github.com/mermaid-js/mermaid-cli) -- [Mermaid Webpack Demo](https://github.com/mermaidjs/mermaid-webpack-demo) -- [Mermaid Parcel Demo](https://github.com/mermaidjs/mermaid-parcel-demo) +- [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor) +- [Mermaid CLI](https://github.com/mermaid-js/mermaid-cli) +- [Mermaid Webpack Demo](https://github.com/mermaidjs/mermaid-webpack-demo) +- [Mermaid Parcel Demo](https://github.com/mermaidjs/mermaid-parcel-demo) ## Request for Assistance @@ -229,8 +229,8 @@ represent the project when answering questions and issues. Together we could continue the work with things like: -- Adding more types of diagrams like mindmaps, ert diagrams, etc. -- Improving existing diagrams +- Adding more types of diagrams like mindmaps, ert diagrams, etc. +- Improving existing diagrams Don't hesitate to contact me if you want to get involved! @@ -279,9 +279,9 @@ The above command generates files into the `dist` folder and publishes them to n ## Related projects -- [Command Line Interface](https://github.com/mermaid-js/mermaid-cli) -- [Live Editor](https://github.com/mermaid-js/mermaid-live-editor) -- [HTTP Server](https://github.com/TomWright/mermaid-server) +- [Command Line Interface](https://github.com/mermaid-js/mermaid-cli) +- [Live Editor](https://github.com/mermaid-js/mermaid-live-editor) +- [HTTP Server](https://github.com/TomWright/mermaid-server) ## Contributors [![Good first issue](https://img.shields.io/github/labels/mermaid-js/mermaid/Good%20first%20issue%21)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Good+first+issue%21%22) [![Contributors](https://img.shields.io/github/contributors/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors) [![Commits](https://img.shields.io/github/commit-activity/m/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors) diff --git a/docs/SUMMARY.md b/docs/SUMMARY.md index d099a5767..0d32a7010 100644 --- a/docs/SUMMARY.md +++ b/docs/SUMMARY.md @@ -2,16 +2,16 @@ # Summary -- [mermaid](README.md) -- [FAQ](faq.md) -- [Breaking changes](breakingChanges.md) -- [Usage](usage.md) -- [Flowchart](flowchart.md) -- [Sequence diagram](sequenceDiagram.md) -- [Gantt diagram](gantt.md) -- [mermaid CLI](mermaidCLI.md) -- [Demos](demos.md) -- [mermaidAPI](mermaidAPI.md) -- [Development](development.md) -- [Upgrading](upgrading.md) -- [Contribute to this website](https://github.com/mermaidjs/mermaid-gitbook) +- [mermaid](README.md) +- [FAQ](faq.md) +- [Breaking changes](breakingChanges.md) +- [Usage](usage.md) +- [Flowchart](flowchart.md) +- [Sequence diagram](sequenceDiagram.md) +- [Gantt diagram](gantt.md) +- [mermaid CLI](mermaidCLI.md) +- [Demos](demos.md) +- [mermaidAPI](mermaidAPI.md) +- [Development](development.md) +- [Upgrading](upgrading.md) +- [Contribute to this website](https://github.com/mermaidjs/mermaid-gitbook) diff --git a/docs/Setup.md b/docs/Setup.md index 161ea353a..6c7a1e32a 100644 --- a/docs/Setup.md +++ b/docs/Setup.md @@ -66,12 +66,12 @@ Theme , the CSS style sheet **Notes:** -- Trace: 0 -- Debug: 1 -- Info: 2 -- Warn: 3 -- Error: 4 -- Fatal: 5 (default) +- Trace: 0 +- Debug: 1 +- Info: 2 +- Warn: 3 +- Error: 4 +- Fatal: 5 (default) ## securityLevel @@ -81,13 +81,13 @@ Theme , the CSS style sheet **Notes**: -- **strict**: (**default**) tags in text are encoded, click functionality is disabled -- **loose**: tags in text are allowed, click functionality is enabled -- **antiscript**: html tags in text are allowed, (only script element is removed), click - functionality is enabled -- **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This - prevent any JavaScript from running in the context. This may hinder interactive functionality - of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc. +- **strict**: (**default**) tags in text are encoded, click functionality is disabled +- **loose**: tags in text are allowed, click functionality is enabled +- **antiscript**: html tags in text are allowed, (only script element is removed), click + functionality is enabled +- **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This + prevent any JavaScript from running in the context. This may hinder interactive functionality + of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc. ## startOnLoad @@ -1422,7 +1422,7 @@ function _Default value: At default, will mirror Global Config_ ### Parameters -- `conf` **MermaidConfig** The base currentConfig to use as siteConfig +- `conf` **MermaidConfig** The base currentConfig to use as siteConfig Returns **[object][5]** The siteConfig @@ -1452,7 +1452,7 @@ corresponding siteConfig value. ### Parameters -- `conf` **any** The potential currentConfig +- `conf` **any** The potential currentConfig Returns **any** The currentConfig merged with the sanitized conf @@ -1462,25 +1462,25 @@ Function that renders an svg with a graph from a chart definition. Usage example ```javascript mermaidAPI.initialize({ - startOnLoad: true, + startOnLoad: true, }); $(function () { - const graphDefinition = 'graph TB\na-->b'; - const cb = function (svgGraph) { - console.log(svgGraph); - }; - mermaidAPI.render('id1', graphDefinition, cb); + const graphDefinition = 'graph TB\na-->b'; + const cb = function (svgGraph) { + console.log(svgGraph); + }; + mermaidAPI.render('id1', graphDefinition, cb); }); ``` ### Parameters -- `id` **[string][6]** The id of the element to be rendered -- `text` **[string][6]** The graph definition -- `cb` **function (svgCode: [string][6], bindFunctions: function (element: [Element][7]): void): void** -- `container` **[Element][7]** Selector to element in which a div with the graph temporarily will be - inserted. If one is provided a hidden div will be inserted in the body of the page instead. The - element will be removed when rendering is completed. +- `id` **[string][6]** The id of the element to be rendered +- `text` **[string][6]** The graph definition +- `cb` **function (svgCode: [string][6], bindFunctions: function (element: [Element][7]): void): void** +- `container` **[Element][7]** Selector to element in which a div with the graph temporarily will be + inserted. If one is provided a hidden div will be inserted in the body of the page instead. The + element will be removed when rendering is completed. Returns **void** @@ -1509,7 +1509,7 @@ options in-place ### Parameters -- `options` **any** The potential setConfig parameter +- `options` **any** The potential setConfig parameter ## addDirective @@ -1517,7 +1517,7 @@ Pushes in a directive to the configuration ### Parameters -- `directive` **[object][5]** The directive to push in +- `directive` **[object][5]** The directive to push in ## reset @@ -1537,7 +1537,7 @@ Pushes in a directive to the configuration ### Parameters -- `config` (optional, default `siteConfig`) +- `config` (optional, default `siteConfig`) Returns **void** @@ -1545,7 +1545,7 @@ Returns **void** ### Parameters -- `options` **MermaidConfig** +- `options` **MermaidConfig** ## @@ -1553,61 +1553,61 @@ Returns **void** ```html ``` diff --git a/docs/_navbar.md b/docs/_navbar.md index dacfc23ca..6ec266461 100644 --- a/docs/_navbar.md +++ b/docs/_navbar.md @@ -1,15 +1,15 @@ # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. -- Getting started +- Getting started - - [Quick start](quickstart.md) - - [Writing more pages](more-pages.md) - - [Custom navbar](custom-navbar.md) - - [Cover page](cover.md) + - [Quick start](quickstart.md) + - [Writing more pages](more-pages.md) + - [Custom navbar](custom-navbar.md) + - [Cover page](cover.md) -- Configuration - - [Configuration](configuration.md) - - [Themes](themes.md) - - [Using plugins](plugins.md) - - [Markdown configuration](markdown.md) - - [Language highlight](language-highlight.md) +- Configuration + - [Configuration](configuration.md) + - [Themes](themes.md) + - [Using plugins](plugins.md) + - [Markdown configuration](markdown.md) + - [Language highlight](language-highlight.md) diff --git a/docs/_sidebar.md b/docs/_sidebar.md index 3d520f773..bb4814305 100644 --- a/docs/_sidebar.md +++ b/docs/_sidebar.md @@ -1,45 +1,45 @@ # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs. -- 📔 Introduction +- 📔 Introduction - - [About Mermaid](README.md) - - [Deployment](n00b-gettingStarted.md) - - [Syntax and Configuration](n00b-syntaxReference.md) + - [About Mermaid](README.md) + - [Deployment](n00b-gettingStarted.md) + - [Syntax and Configuration](n00b-syntaxReference.md) -- 📊 Diagram Syntax +- 📊 Diagram Syntax - - [Flowchart](flowchart.md) - - [Sequence Diagram](sequenceDiagram.md) - - [Class Diagram](classDiagram.md) - - [State Diagram](stateDiagram.md) - - [Entity Relationship Diagram](entityRelationshipDiagram.md) - - [User Journey](user-journey.md) - - [Gantt](gantt.md) - - [Pie Chart](pie.md) - - [Requirement Diagram](requirementDiagram.md) - - [Gitgraph (Git) Diagram 🔥](gitgraph.md) - - [C4C Diagram (Context) Diagram 🦺⚠️](c4c.md) - - [Other Examples](examples.md) + - [Flowchart](flowchart.md) + - [Sequence Diagram](sequenceDiagram.md) + - [Class Diagram](classDiagram.md) + - [State Diagram](stateDiagram.md) + - [Entity Relationship Diagram](entityRelationshipDiagram.md) + - [User Journey](user-journey.md) + - [Gantt](gantt.md) + - [Pie Chart](pie.md) + - [Requirement Diagram](requirementDiagram.md) + - [Gitgraph (Git) Diagram 🔥](gitgraph.md) + - [C4C Diagram (Context) Diagram 🦺⚠️](c4c.md) + - [Other Examples](examples.md) -- ⚙️ Deployment and Configuration +- ⚙️ Deployment and Configuration - - [Tutorials](Tutorials.md) - - [API-Usage](usage.md) - - [Mermaid API Configuration](Setup.md) - - [Directives](directives.md) - - [Theming](theming.md) - - [Accessibility](accessibility.md) - - [Mermaid CLI](mermaidCLI.md) - - [Advanced usage](n00b-advanced.md) + - [Tutorials](Tutorials.md) + - [API-Usage](usage.md) + - [Mermaid API Configuration](Setup.md) + - [Directives](directives.md) + - [Theming](theming.md) + - [Accessibility](accessibility.md) + - [Mermaid CLI](mermaidCLI.md) + - [Advanced usage](n00b-advanced.md) -- 📚 Misc +- 📚 Misc - - [Use-Cases and Integrations](integrations.md) - - [FAQ](faq.md) + - [Use-Cases and Integrations](integrations.md) + - [FAQ](faq.md) -- 🙌 Contributions and Community - - [Overview for Beginners](n00b-overview.md) - - [Development and Contribution ](development.md) - - [Changelog](CHANGELOG.md) - - [Adding Diagrams ](newDiagram.md) - - [Security ](security.md) +- 🙌 Contributions and Community + - [Overview for Beginners](n00b-overview.md) + - [Development and Contribution ](development.md) + - [Changelog](CHANGELOG.md) + - [Adding Diagrams ](newDiagram.md) + - [Security ](security.md) diff --git a/docs/accessibility.md b/docs/accessibility.md index 04ae64ba8..820fe364a 100644 --- a/docs/accessibility.md +++ b/docs/accessibility.md @@ -16,8 +16,8 @@ This support for accessibility options is available for all the diagrams/chart t The diagram authors can now add the accessibility options in the diagram definition, using the `accTitle` and `accDescr` keywords, where each keyword is followed by `:` and the string value for title and description like: -- `accTitle: "Your Accessibility Title"` or -- `accDescr: "Your Accessibility Description"` +- `accTitle: "Your Accessibility Title"` or +- `accDescr: "Your Accessibility Description"` **When these two options are defined, they will add a coressponding `` and `<desc>` tag in the SVG.** diff --git a/docs/breakingChanges.md b/docs/breakingChanges.md index 7ea518c2b..f5bb4ddb3 100644 --- a/docs/breakingChanges.md +++ b/docs/breakingChanges.md @@ -44,7 +44,7 @@ You just: ```javascript mermaid.initialize({ - theme: 'forest', + theme: 'forest', }); ``` diff --git a/docs/c4c.md b/docs/c4c.md index d3d4fe74b..1b4251785 100644 --- a/docs/c4c.md +++ b/docs/c4c.md @@ -104,11 +104,11 @@ For an example, see the source code demos/index.html 5 types of C4 charts are supported. -- System Context (C4Context) -- Container diagram (C4Container) -- Component diagram (C4Component) -- Dynamic diagram (C4Dynamic) -- Deployment diagram (C4Deployment) +- System Context (C4Context) +- Container diagram (C4Container) +- Component diagram (C4Component) +- Dynamic diagram (C4Dynamic) +- Deployment diagram (C4Deployment) Please refer to the linked document [C4-PlantUML syntax](https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/README.md) for how to write the c4 diagram. @@ -118,129 +118,129 @@ updateElementStyle and UpdateElementStyle are written in the diagram last part. The layout does not use a fully automated layout algorithm. The position of shapes is adjusted by changing the order in which statements are written. So there is no plan to support the following Layout statements. The number of shapes per row and the number of boundaries can be adjusted using UpdateLayoutConfig. -- Layout -- - Lay_U, Lay_Up -- - Lay_D, Lay_Down -- - Lay_L, Lay_Left -- - Lay_R, Lay_Right +- Layout +- - Lay_U, Lay_Up +- - Lay_D, Lay_Down +- - Lay_L, Lay_Left +- - Lay_R, Lay_Right The following unfinished features are not supported in the short term. -- \[ ] sprite +- \[ ] sprite -- \[ ] tags +- \[ ] tags -- \[ ] link +- \[ ] link -- \[ ] Legend +- \[ ] Legend -- \[x] System Context +- \[x] System Context -- - \[x] Person(alias, label, ?descr, ?sprite, ?tags, $link) +- - \[x] Person(alias, label, ?descr, ?sprite, ?tags, $link) -- - \[x] Person_Ext +- - \[x] Person_Ext -- - \[x] System(alias, label, ?descr, ?sprite, ?tags, $link) +- - \[x] System(alias, label, ?descr, ?sprite, ?tags, $link) -- - \[x] SystemDb +- - \[x] SystemDb -- - \[x] SystemQueue +- - \[x] SystemQueue -- - \[x] System_Ext +- - \[x] System_Ext -- - \[x] SystemDb_Ext +- - \[x] SystemDb_Ext -- - \[x] SystemQueue_Ext +- - \[x] SystemQueue_Ext -- - \[x] Boundary(alias, label, ?type, ?tags, $link) +- - \[x] Boundary(alias, label, ?type, ?tags, $link) -- - \[x] Enterprise_Boundary(alias, label, ?tags, $link) +- - \[x] Enterprise_Boundary(alias, label, ?tags, $link) -- - \[x] System_Boundary +- - \[x] System_Boundary -- \[x] Container diagram +- \[x] Container diagram -- - \[x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link) +- - \[x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link) -- - \[x] ContainerDb +- - \[x] ContainerDb -- - \[x] ContainerQueue +- - \[x] ContainerQueue -- - \[x] Container_Ext +- - \[x] Container_Ext -- - \[x] ContainerDb_Ext +- - \[x] ContainerDb_Ext -- - \[x] ContainerQueue_Ext +- - \[x] ContainerQueue_Ext -- - \[x] Container_Boundary(alias, label, ?tags, $link) +- - \[x] Container_Boundary(alias, label, ?tags, $link) -- \[x] Component diagram +- \[x] Component diagram -- - \[x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link) +- - \[x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link) -- - \[x] ComponentDb +- - \[x] ComponentDb -- - \[x] ComponentQueue +- - \[x] ComponentQueue -- - \[x] Component_Ext +- - \[x] Component_Ext -- - \[x] ComponentDb_Ext +- - \[x] ComponentDb_Ext -- - \[x] ComponentQueue_Ext +- - \[x] ComponentQueue_Ext -- \[x] Dynamic diagram +- \[x] Dynamic diagram -- - \[x] RelIndex(index, from, to, label, ?tags, $link) +- - \[x] RelIndex(index, from, to, label, ?tags, $link) -- \[x] Deployment diagram +- \[x] Deployment diagram -- - \[x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link) +- - \[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(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_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] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node() -- \[x] Relationship Types +- \[x] Relationship Types -- - \[x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link) +- - \[x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link) -- - \[x] BiRel (bidirectional relationship) +- - \[x] BiRel (bidirectional relationship) -- - \[x] Rel_U, Rel_Up +- - \[x] Rel_U, Rel_Up -- - \[x] Rel_D, Rel_Down +- - \[x] Rel_D, Rel_Down -- - \[x] Rel_L, Rel_Left +- - \[x] Rel_L, Rel_Left -- - \[x] Rel_R, Rel_Right +- - \[x] Rel_R, Rel_Right -- - \[x] Rel_Back +- - \[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] 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 +- \[ ] 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. +- - \[ ] 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. +- - \[ ] 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] 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. +- - \[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. +- - \[ ] 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. +- - \[ ] 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. +- - \[ ] 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. +- - \[ ] 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. +- - \[ ] 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] 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. diff --git a/docs/classDiagram.md b/docs/classDiagram.md index f2c4f90df..38e937b50 100644 --- a/docs/classDiagram.md +++ b/docs/classDiagram.md @@ -64,9 +64,9 @@ classDiagram UML provides mechanisms to represent class members, such as attributes and methods, and additional information about them. A single instance of a class in the diagram contains three compartments: -- The top compartment contains the name of the class. It is printed in bold and centered, and the first letter is capitalized. It may also contain optional annotation text describing the nature of the class. -- The middle compartment contains the attributes of the class. They are left-aligned and the first letter is lowercase. -- The bottom compartment contains the operations the class can execute. They are also left-aligned and the first letter is lowercase. +- The top compartment contains the name of the class. It is printed in bold and centered, and the first letter is capitalized. It may also contain optional annotation text describing the nature of the class. +- The middle compartment contains the attributes of the class. They are left-aligned and the first letter is lowercase. +- The bottom compartment contains the operations the class can execute. They are also left-aligned and the first letter is lowercase. ```mermaid-example classDiagram @@ -92,8 +92,8 @@ classDiagram There are two ways to define a class: -- Explicitly using keyword **class** like `class Animal` which would define the Animal class. -- Via a **relationship** which defines two classes at a time along with their relationship. For instance, `Vehicle <|-- Car`. +- Explicitly using keyword **class** like `class Animal` which would define the Animal class. +- Via a **relationship** which defines two classes at a time along with their relationship. For instance, `Vehicle <|-- Car`. ```mermaid-example classDiagram @@ -117,7 +117,7 @@ Mermaid distinguishes between attributes and functions/methods based on if the * There are two ways to define the members of a class, and regardless of whichever syntax is used to define the members, the output will still be same. The two different ways are : -- Associate a member of a class using **:** (colon) followed by member name, useful to define one member at a time. For example: +- Associate a member of a class using **:** (colon) followed by member name, useful to define one member at a time. For example: ```mermaid-example classDiagram @@ -137,7 +137,7 @@ BankAccount : +deposit(amount) BankAccount : +withdrawal(amount) ``` -- Associate members of a class using **{}** brackets, where members are grouped within curly brackets. Suitable for defining multiple members at once. For example: +- Associate members of a class using **{}** brackets, where members are grouped within curly brackets. Suitable for defining multiple members at once. For example: ```mermaid-example classDiagram @@ -225,19 +225,19 @@ Optionally you can end the method/function definition with the data type that wi To describe the visibility (or encapsulation) of an attribute or method/function that is a part of a class (i.e. a class member), optional notation may be placed before that members' name: -- `+` Public -- `-` Private -- `#` Protected -- `~` Package/Internal +- `+` Public +- `-` Private +- `#` Protected +- `~` Package/Internal > _note_ you can also include additional _classifiers_ to a method definition by adding the following notation to the _end_ of the method, i.e.: after the `()`: > -> - `*` Abstract e.g.: `someAbstractMethod()*` -> - `$` Static e.g.: `someStaticMethod()$` +> - `*` Abstract e.g.: `someAbstractMethod()*` +> - `$` Static e.g.: `someStaticMethod()$` > _note_ you can also include additional _classifiers_ to a field definition by adding the following notation to the end of its name: > -> - `$` Static e.g.: `String someField$` +> - `$` Static e.g.: `String someField$` ## Defining Relationship @@ -371,13 +371,13 @@ Multiplicity notations are placed near the end of an association. The different cardinality options are : -- `1` Only 1 -- `0..1` Zero or One -- `1..*` One or more -- `*` Many -- `n` n {where n>1} -- `0..n` zero to n {where n>1} -- `1..n` one to n {where n>1} +- `1` Only 1 +- `0..1` Zero or One +- `1..*` One or more +- `*` Many +- `n` n {where n>1} +- `0..n` zero to n {where n>1} +- `1..n` one to n {where n>1} Cardinality can be easily defined by placing the text option within quotes `"` before or after a given arrow. For example: @@ -401,14 +401,14 @@ classDiagram It is possible to annotate classes with markers to provide additional metadata about the class. This can give a clearer indication about its nature. Some common annotations include: -- `<<Interface>>` To represent an Interface class -- `<<Abstract>>` To represent an abstract class -- `<<Service>>` To represent a service class -- `<<Enumeration>>` To represent an enum +- `<<Interface>>` To represent an Interface class +- `<<Abstract>>` To represent an abstract class +- `<<Service>>` To represent a service class +- `<<Enumeration>>` To represent an enum Annotations are defined within the opening `<<` and closing `>>`. There are two ways to add an annotation to a class, and either way the output will be same: -- In a **_separate line_** after a class is defined: +- In a **_separate line_** after a class is defined: ```mermaid-example classDiagram @@ -426,7 +426,7 @@ Shape : noOfVertices Shape : draw() ``` -- In a **_nested structure_** along with the class definition: +- In a **_nested structure_** along with the class definition: ```mermaid-example classDiagram @@ -528,11 +528,11 @@ You would define these actions on a separate line after all classes have been de 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 -- _reference_ is either the url link, or the function name for callback. -- (_optional_) tooltip is a string to be displayed when hovering over element (note: The styles of the tooltip are set by the class .mermaidTooltip.) -- note: callback function will be called with the nodeId as parameter. +- _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 +- _reference_ is either the url link, or the function name for callback. +- (_optional_) tooltip is a string to be displayed when hovering over element (note: The styles of the tooltip are set by the class .mermaidTooltip.) +- note: callback function will be called with the nodeId as parameter. ### Examples @@ -558,9 +558,9 @@ click Shape2 call callbackFunction() "This is a tooltip for a callback" ```html <script> - var callbackFunction = function () { - alert('A callback was triggered'); - }; + var callbackFunction = function () { + alert('A callback was triggered'); + }; </script> ``` @@ -594,23 +594,23 @@ Beginner's tip—a full example using interactive links in an HTML page: ```html <body> - <div class="mermaid"> - classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : - +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() - +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() } - callback Duck callback "Tooltip" link Zebra "https://www.github.com" "This is a link" - </div> + <div class="mermaid"> + classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : + +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() + +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() } callback + Duck callback "Tooltip" link Zebra "https://www.github.com" "This is a link" + </div> - <script> - var callback = function () { - alert('A callback was triggered'); - }; - var config = { - startOnLoad: true, - securityLevel: 'loose', - }; - mermaid.initialize(config); - </script> + <script> + var callback = function () { + alert('A callback was triggered'); + }; + var config = { + startOnLoad: true, + securityLevel: 'loose', + }; + mermaid.initialize(config); + </script> </body> ``` @@ -622,11 +622,11 @@ It is possible to apply specific styles such as a thicker border or a different ```html <style> - .cssClass > rect { - fill: #ff0000; - stroke: #ffff00; - stroke-width: 4px; - } + .cssClass > rect { + fill: #ff0000; + stroke: #ffff00; + stroke-width: 4px; + } </style> ``` @@ -679,91 +679,91 @@ The main styling of the class diagram is done with a preset number of css classe ```scss body { - background: white; + background: white; } g.classGroup text { - fill: $nodeBorder; - stroke: none; - font-family: 'trebuchet ms', verdana, arial; - font-family: var(--mermaid-font-family); - font-size: 10px; + fill: $nodeBorder; + stroke: none; + font-family: 'trebuchet ms', verdana, arial; + font-family: var(--mermaid-font-family); + font-size: 10px; - .title { - font-weight: bolder; - } + .title { + font-weight: bolder; + } } g.classGroup rect { - fill: $nodeBkg; - stroke: $nodeBorder; + fill: $nodeBkg; + stroke: $nodeBorder; } g.classGroup line { - stroke: $nodeBorder; - stroke-width: 1; + stroke: $nodeBorder; + stroke-width: 1; } .classLabel .box { - stroke: none; - stroke-width: 0; - fill: $nodeBkg; - opacity: 0.5; + stroke: none; + stroke-width: 0; + fill: $nodeBkg; + opacity: 0.5; } .classLabel .label { - fill: $nodeBorder; - font-size: 10px; + fill: $nodeBorder; + font-size: 10px; } .relation { - stroke: $nodeBorder; - stroke-width: 1; - fill: none; + stroke: $nodeBorder; + stroke-width: 1; + fill: none; } @mixin composition { - fill: $nodeBorder; - stroke: $nodeBorder; - stroke-width: 1; + fill: $nodeBorder; + stroke: $nodeBorder; + stroke-width: 1; } #compositionStart { - @include composition; + @include composition; } #compositionEnd { - @include composition; + @include composition; } @mixin aggregation { - fill: $nodeBkg; - stroke: $nodeBorder; - stroke-width: 1; + fill: $nodeBkg; + stroke: $nodeBorder; + stroke-width: 1; } #aggregationStart { - @include aggregation; + @include aggregation; } #aggregationEnd { - @include aggregation; + @include aggregation; } #dependencyStart { - @include composition; + @include composition; } #dependencyEnd { - @include composition; + @include composition; } #extensionStart { - @include composition; + @include composition; } #extensionEnd { - @include composition; + @include composition; } ``` diff --git a/docs/developer-docs/configuration.md b/docs/developer-docs/configuration.md index 989fd7f72..a10954416 100644 --- a/docs/developer-docs/configuration.md +++ b/docs/developer-docs/configuration.md @@ -4,9 +4,9 @@ When mermaid starts, configuration is extracted to determine a configuration to be used for a diagram. There are 3 sources for configuration: -- The default configuration -- Overrides at the site level are set by the initialize call, and will be applied to all diagrams in the site/app. The term for this is the **siteConfig**. -- Directives - diagram authors can update select configuration parameters directly in the diagram code via directives. These are applied to the render config. +- The default configuration +- Overrides at the site level are set by the initialize call, and will be applied to all diagrams in the site/app. The term for this is the **siteConfig**. +- Directives - diagram authors can update select configuration parameters directly in the diagram code via directives. These are applied to the render config. **The render config** is configuration that is used when rendering by applying these configurations. diff --git a/docs/development.md b/docs/development.md index 8d8ac2f8c..d5cbe891e 100644 --- a/docs/development.md +++ b/docs/development.md @@ -26,9 +26,9 @@ This means that **you should branch off your pull request from develop** and dir We make all changes via Pull Requests. As we have many Pull Requests from developers new to mermaid, we have put in place a process, wherein _knsv, Knut Sveidqvist_ is the primary reviewer of changes and merging pull requests. The process is as follows: -- 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 `src/docs` folder; you can submit them via direct commits) +- 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 `src/docs` folder; you can submit them via direct commits) When you commit code, create a branch with the following naming convention: @@ -84,8 +84,8 @@ This is what a rendering test looks like: ```js it('should render forks and joins', () => { - imgSnapshotTest( - ` + imgSnapshotTest( + ` stateDiagram state fork_state <<fork>> [*] --> fork_state @@ -98,9 +98,9 @@ it('should render forks and joins', () => { join_state --> State4 State4 --> [*] `, - { logLevel: 0 } - ); - cy.get('svg'); + { logLevel: 0 } + ); + cy.get('svg'); }); ``` diff --git a/docs/diagrams-and-syntax-and-examples/flowchart.md b/docs/diagrams-and-syntax-and-examples/flowchart.md index 131bef440..698f8d91c 100644 --- a/docs/diagrams-and-syntax-and-examples/flowchart.md +++ b/docs/diagrams-and-syntax-and-examples/flowchart.md @@ -39,11 +39,11 @@ graph LR Possible FlowChart orientations are: -- TB - top to bottom -- TD - top-down (same as top to bottom) -- BT - bottom to top -- RL - right to left -- LR - left to right +- TB - top to bottom +- TD - top-down (same as top to bottom) +- BT - bottom to top +- RL - right to left +- LR - left to right ## Flowcharts @@ -636,14 +636,14 @@ A node can have click events bound that lead to either a JavaScript callback or click nodeId callback click nodeId call callback() -- nodeId is the id of the node -- `callback` is the name of a JavaScript function defined on the page displaying the graph. The function will be called with the nodeId as an incoming parameter. +- nodeId is the id of the node +- `callback` is the name of a JavaScript function defined on the page displaying the graph. The function will be called with the nodeId as an incoming parameter. ```html <script> - var callback = function (nodeId) { - alert('A callback was triggered on ' + nodeId); - }; + var callback = function (nodeId) { + alert('A callback was triggered on ' + nodeId); + }; </script> ``` @@ -707,27 +707,27 @@ Beginner's tip—here's a full example of using interactive links in HTML: ```html <body> - <div class="mermaid"> - graph LR; A-->B; B-->C; C-->D; click A callback "Tooltip" click B "https://www.github.com" - "This is a link" click C call callback() "Tooltip" click D href "https://www.github.com" - "This is a link" - </div> + <div class="mermaid"> + graph LR; A-->B; B-->C; C-->D; click A callback "Tooltip" click B "https://www.github.com" "This + is a link" click C call callback() "Tooltip" click D href "https://www.github.com" "This is a + link" + </div> - <script> - var callback = function () { - alert('A callback was triggered'); - }; - var config = { - startOnLoad: true, - flowchart: { - useMaxWidth: true, - htmlLabels: true, - curve: 'cardinal', - }, - securityLevel: 'loose', - }; - mermaid.initialize(config); - </script> + <script> + var callback = function () { + alert('A callback was triggered'); + }; + var config = { + startOnLoad: true, + flowchart: { + useMaxWidth: true, + htmlLabels: true, + curve: 'cardinal', + }, + securityLevel: 'loose', + }; + mermaid.initialize(config); + </script> </body> ``` @@ -822,9 +822,9 @@ It is also possible to predefine classes in css styles that can be applied from ```css .cssClass > rect { - fill: #ff0000; - stroke: #ffff00; - stroke-width: 4px; + fill: #ff0000; + stroke: #ffff00; + stroke-width: 4px; } ``` @@ -872,9 +872,9 @@ graph TD ## 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. +- 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. -- A single space is allowed between vertices and the link, however there should not be any space between a vertex and its text, or a link and its text. The old syntax of graph declarations will also work, so this new feature is optional and is introduced to improve readability. +- A single space is allowed between vertices and the link, however there should not be any space between a vertex and its text, or a link and its text. The old syntax of graph declarations will also work, so this new feature is optional and is introduced to improve readability. Below is an example of the new way to declare graph edges. This is valid alongside any old-style declarations of graph edges. @@ -903,6 +903,6 @@ In Javascript config parameters can be set by using `mermaid.flowchartConfig`: ```javascript mermaid.flowchartConfig = { - width: '100%', + width: '100%', }; ``` diff --git a/docs/directives.md b/docs/directives.md index 35d69881a..ceb00ac96 100644 --- a/docs/directives.md +++ b/docs/directives.md @@ -16,12 +16,12 @@ Mermaid basically supports two types of configuration options to be overridden b 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 -- logLevel -- securityLevel -- startOnLoad -- secure +- theme +- fontFamily +- logLevel +- securityLevel +- 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. @@ -95,9 +95,9 @@ parsing the above generates a single `%%init%%` JSON object below, combining the ```json5 { - logLevel: 'fatal', - theme: 'dark', - startOnLoad: true, + logLevel: 'fatal', + theme: 'dark', + startOnLoad: true, } ``` @@ -183,11 +183,11 @@ The following code snippet changes theme to forest: Possible logLevel values are: -- `1` for _debug_, -- `2` for _info_ -- `3` for _warn_ -- `4` for _error_ -- `5` for _only fatal errors_ +- `1` for _debug_, +- `2` for _info_ +- `3` for _warn_ +- `4` for _error_ +- `5` for _only fatal errors_ Default Value is `5`. @@ -219,10 +219,10 @@ A --> C[End] Some common flowchart configurations are: -- _htmlLabels_: true/false -- _curve_: linear/curve -- _diagramPadding_: number -- _useMaxWidth_: number +- _htmlLabels_: true/false +- _curve_: linear/curve +- _diagramPadding_: number +- _useMaxWidth_: number For complete list of flowchart configurations, see [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 all diagram specific configurations updated in the docs_ @@ -259,14 +259,14 @@ A --> C[End] Some common sequence configurations are: -- _width_: number -- _height_: number -- _messageAlign_: left, center, right -- _mirrorActors_: boolean -- _useMaxWidth_: boolean -- _rightAngles_: boolean -- _showSequenceNumbers_: boolean -- _wrap_: boolean +- _width_: number +- _height_: number +- _messageAlign_: left, center, right +- _mirrorActors_: boolean +- _useMaxWidth_: boolean +- _rightAngles_: boolean +- _showSequenceNumbers_: boolean +- _wrap_: boolean For complete list of sequence diagram configurations, see _defaultConfig.js_ in the source code. _Soon we plan to publish a complete list all diagram specific configurations updated in the docs_ diff --git a/docs/entityRelationshipDiagram.md b/docs/entityRelationshipDiagram.md index 38378be9e..34e6a3ac6 100644 --- a/docs/entityRelationshipDiagram.md +++ b/docs/entityRelationshipDiagram.md @@ -80,10 +80,10 @@ Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to Where: -- `first-entity` is the name of an entity. Names must begin with an alphabetic character and may also contain digits, hyphens, and underscores. -- `relationship` describes the way that both entities inter-relate. See below. -- `second-entity` is the name of the other entity. -- `relationship-label` describes the relationship from the perspective of the first entity. +- `first-entity` is the name of an entity. Names must begin with an alphabetic character and may also contain digits, hyphens, and underscores. +- `relationship` describes the way that both entities inter-relate. See below. +- `second-entity` is the name of the other entity. +- `relationship-label` describes the relationship from the perspective of the first entity. For example: @@ -97,9 +97,9 @@ Only the `first-entity` part of a statement is mandatory. This makes it possible The `relationship` part of each statement can be broken down into three sub-components: -- the cardinality of the first entity with respect to the second, -- whether the relationship confers identity on a 'child' entity -- the cardinality of the second entity with respect to the first +- the cardinality of the first entity with respect to the second, +- whether the relationship confers identity on a 'child' entity +- the cardinality of the second entity with respect to the first Cardinality is a property that describes how many elements of another entity can be related to the entity in question. In the above example a `PROPERTY` can have one or more `ROOM` instances associated to it, whereas a `ROOM` can only be associated with one `PROPERTY`. In each cardinality marker there are two characters. The outermost character represents a maximum value, and the innermost character represents a minimum value. The table below summarises possible cardinalities. @@ -234,8 +234,8 @@ erDiagram ### Other Things -- If you want the relationship label to be more than one word, you must use double quotes around the phrase -- If you don't want a label at all on a relationship, you must use an empty double-quoted string +- If you want the relationship label to be more than one word, you must use double quotes around the phrase +- If you don't want a label at all on a relationship, you must use an empty double-quoted string ## Styling diff --git a/docs/flowchart.md b/docs/flowchart.md index d59838d90..8f65adadd 100644 --- a/docs/flowchart.md +++ b/docs/flowchart.md @@ -70,11 +70,11 @@ flowchart LR Possible FlowChart orientations are: -- TB - top to bottom -- TD - top-down/ same as top to bottom -- BT - bottom to top -- RL - right to left -- LR - left to right +- TB - top to bottom +- TD - top-down/ same as top to bottom +- BT - bottom to top +- RL - right to left +- LR - left to right ## Node shapes @@ -678,16 +678,16 @@ It is possible to bind a click event to a node, the click can lead to either a j click nodeId callback click nodeId call callback() -- nodeId is the id of the node -- callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the nodeId as parameter. +- nodeId is the id of the node +- callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the nodeId as parameter. Examples of tooltip usage below: ```html <script> - var callback = function () { - alert('A callback was triggered'); - }; + var callback = function () { + alert('A callback was triggered'); + }; </script> ``` @@ -749,23 +749,23 @@ Beginner's tip—a full example using interactive links in a html context: ```html <body> - <div class="mermaid"> - flowchart LR A-->B B-->C C-->D click A callback "Tooltip" click B "https://www.github.com" - "This is a link" click C call callback() "Tooltip" click D href "https://www.github.com" - "This is a link" - </div> + <div class="mermaid"> + flowchart LR A-->B B-->C C-->D click A callback "Tooltip" click B "https://www.github.com" "This + is a link" click C call callback() "Tooltip" click D href "https://www.github.com" "This is a + link" + </div> - <script> - var callback = function () { - alert('A callback was triggered'); - }; - var config = { - startOnLoad: true, - flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' }, - securityLevel: 'loose', - }; - mermaid.initialize(config); - </script> + <script> + var callback = function () { + alert('A callback was triggered'); + }; + var config = { + startOnLoad: true, + flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' }, + securityLevel: 'loose', + }; + mermaid.initialize(config); + </script> </body> ``` @@ -863,11 +863,11 @@ below: ```html <style> - .cssClass > rect { - fill: #ff0000; - stroke: #ffff00; - stroke-width: 4px; - } + .cssClass > rect { + fill: #ff0000; + stroke: #ffff00; + stroke-width: 4px; + } </style> ``` @@ -919,9 +919,9 @@ flowchart TD ## 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. +- 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. -- A single space is allowed between vertices and the link. However there should not be any space between a vertex and its text and a link and its text. The old syntax of graph declaration will also work and hence this new feature is optional and is introduced to improve readability. +- A single space is allowed between vertices and the link. However there should not be any space between a vertex and its text and a link and its text. The old syntax of graph declaration will also work and hence this new feature is optional and is introduced to improve readability. Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges. diff --git a/docs/gantt.md b/docs/gantt.md index 95ff543d3..30fc42c4c 100644 --- a/docs/gantt.md +++ b/docs/gantt.md @@ -254,61 +254,61 @@ Styling of the a gantt diagram is done by defining a number of css classes. Duri ### Classes used -Class | Description -\--- | --- -grid.tick | Styling for the Grid Lines -grid.path | Styling for the Grid's borders -.taskText | Task Text Styling -.taskTextOutsideRight | Styling for Task Text that exceeds the activity bar towards the right. -.taskTextOutsideLeft | Styling for Task Text that exceeds the activity bar, towards the left. -todayMarker | Toggle and Styling for the "Today Marker" +| Class | Description | +| --------------------- | ---------------------------------------------------------------------- | +| grid.tick | Styling for the Grid Lines | +| grid.path | Styling for the Grid's borders | +| .taskText | Task Text Styling | +| .taskTextOutsideRight | Styling for Task Text that exceeds the activity bar towards the right. | +| .taskTextOutsideLeft | Styling for Task Text that exceeds the activity bar, towards the left. | +| todayMarker | Toggle and Styling for the "Today Marker" | ### Sample stylesheet ```css .grid .tick { - stroke: lightgrey; - opacity: 0.3; - shape-rendering: crispEdges; + stroke: lightgrey; + opacity: 0.3; + shape-rendering: crispEdges; } .grid path { - stroke-width: 0; + stroke-width: 0; } #tag { - color: white; - background: #fa283d; - width: 150px; - position: absolute; - display: none; - padding: 3px 6px; - margin-left: -80px; - font-size: 11px; + color: white; + background: #fa283d; + width: 150px; + position: absolute; + display: none; + padding: 3px 6px; + margin-left: -80px; + font-size: 11px; } #tag:before { - border: solid transparent; - content: ' '; - height: 0; - left: 50%; - margin-left: -5px; - position: absolute; - width: 0; - border-width: 10px; - border-bottom-color: #fa283d; - top: -20px; + border: solid transparent; + content: ' '; + height: 0; + left: 50%; + margin-left: -5px; + position: absolute; + width: 0; + border-width: 10px; + border-bottom-color: #fa283d; + top: -20px; } .taskText { - fill: white; - text-anchor: middle; + fill: white; + text-anchor: middle; } .taskTextOutsideRight { - fill: black; - text-anchor: start; + fill: black; + text-anchor: start; } .taskTextOutsideLeft { - fill: black; - text-anchor: end; + fill: black; + text-anchor: end; } ``` @@ -333,20 +333,20 @@ mermaid.ganttConfig can be set to a JSON string with config parameters or the co ```javascript mermaid.ganttConfig = { - titleTopMargin: 25, - barHeight: 20, - barGap: 4, - topPadding: 75, - sidePadding: 75, + titleTopMargin: 25, + barHeight: 20, + barGap: 4, + topPadding: 75, + sidePadding: 75, }; ``` ### Possible configuration params: -Param | Description | Default value -\--- | --- | --- -mirrorActor|Turns on/off the rendering of actors below the diagram as well as above it|false -bottomMarginAdj|Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists.|1 +| Param | Description | Default value | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | +| mirrorActor | Turns on/off the rendering of actors below the diagram as well as above it | false | +| bottomMarginAdj | Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists. | 1 | ## Interaction @@ -355,32 +355,32 @@ It is possible to bind a click event to a task. The click can lead to either a j click taskId call callback(arguments) click taskId href URL -- taskId is the id of the task -- callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the taskId as the parameter if no other arguments are specified. +- taskId is the id of the task +- callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the taskId as the parameter if no other arguments are specified. Beginner's tip—a full example using interactive links in an html context: ```html <body> - <div class="mermaid"> - gantt dateFormat YYYY-MM-DD section Clickable Visit mermaidjs :active, cl1, 2014-01-07, 3d - Print arguments :cl2, after cl1, 3d Print task :cl3, after cl2, 3d click cl1 href - "https://mermaidjs.github.io/" click cl2 call printArguments("test1", "test2", test3) click - cl3 call printTask() - </div> + <div class="mermaid"> + gantt dateFormat YYYY-MM-DD section Clickable Visit mermaidjs :active, cl1, 2014-01-07, 3d Print + arguments :cl2, after cl1, 3d Print task :cl3, after cl2, 3d click cl1 href + "https://mermaidjs.github.io/" click cl2 call printArguments("test1", "test2", test3) click cl3 + call printTask() + </div> - <script> - var printArguments = function (arg1, arg2, arg3) { - alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3); - }; - var printTask = function (taskId) { - alert('taskId: ' + taskId); - }; - var config = { - startOnLoad: true, - securityLevel: 'loose', - }; - mermaid.initialize(config); - </script> + <script> + var printArguments = function (arg1, arg2, arg3) { + alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3); + }; + var printTask = function (taskId) { + alert('taskId: ' + taskId); + }; + var config = { + startOnLoad: true, + securityLevel: 'loose', + }; + mermaid.initialize(config); + </script> </body> ``` diff --git a/docs/gitgraph.md b/docs/gitgraph.md index 137f743e9..c423c2515 100644 --- a/docs/gitgraph.md +++ b/docs/gitgraph.md @@ -38,10 +38,10 @@ Mermaid can render Git diagrams In Mermaid, we support the basic git operations like: -- _commit_ : Representing a new commit on the current branch. -- _branch_ : To create & switch to a new branch, setting it as the current branch. -- _checkout_ : To checking out an existing branch and setting it as the current branch. -- _merge_ : To merge an existing branch onto the current branch. +- _commit_ : Representing a new commit on the current branch. +- _branch_ : To create & switch to a new branch, setting it as the current branch. +- _checkout_ : To checking out an existing branch and setting it as the current branch. +- _merge_ : To merge an existing branch onto the current branch. With the help of these key git commands, you will be able to draw a gitgraph in Mermaid very easily and quickly. Entity names are often capitalized, although there is no accepted standard on this, and it is not required in Mermaid. @@ -100,9 +100,9 @@ In this example, we have given our custom IDs to the commits. In Mermaid, a commit can be of three type, which render a bit different in the diagram. These types are: -- `NORMAL` : Default commit type. Represented by a solid circle in the diagram -- `REVERSE` : To emphasize a commit as a reverse commit. Represented by a crossed solid circle in the diagram. -- `HIGHLIGHT` : To highlight a particular commit in the diagram. Represented by a filled rectangle in the diagram. +- `NORMAL` : Default commit type. Represented by a solid circle in the diagram +- `REVERSE` : To emphasize a commit as a reverse commit. Represented by a crossed solid circle in the diagram. +- `HIGHLIGHT` : To highlight a particular commit in the diagram. Represented by a filled rectangle in the diagram. For a given commit you may specify its type at the time of declaring it using the `type` attribute, followed by `:` and the required type option discussed above. For example: `commit type: HIGHLIGHT` @@ -282,9 +282,9 @@ Since the current branch at this point is still `main`, the last two commits are You can also decorate your merge with similar attributes as you did for the commit using: -- `id`--> To override the default ID with custom ID -- `tag`--> To add a custom tag to your merge commit -- `type`--> To override the default shape of merge commit. Here you can use other commit type mentioned earlier. +- `id`--> To override the default ID with custom ID +- `tag`--> To add a custom tag to your merge commit +- `type`--> To override the default shape of merge commit. Here you can use other commit type mentioned earlier. And you can choose to use none, some or all of these attributes together. For example: `merge develop id: "my_custom_id" tag: "my_custom_tag" type: REVERSE` @@ -397,10 +397,10 @@ Let see an example: In Mermaid, you have the option to configure the gitgraph diagram. You can configure the following options: -- `showBranches` : Boolean, default is `true`. If set to `false`, the branches are not shown in the diagram. -- `showCommitLabel` : Boolean, default is `true`. If set to `false`, the commit labels are not shown in the diagram. -- `mainBranchName` : String, default is `main`. The name of the default/root branch. -- `mainBranchOrder` : Position of the main branch in the list of branches. default is `0`, meaning, by default `main` branch is the first in the order. +- `showBranches` : Boolean, default is `true`. If set to `false`, the branches are not shown in the diagram. +- `showCommitLabel` : Boolean, default is `true`. If set to `false`, the commit labels are not shown in the diagram. +- `mainBranchName` : String, default is `main`. The name of the default/root branch. +- `mainBranchOrder` : Position of the main branch in the list of branches. default is `0`, meaning, by default `main` branch is the first in the order. Let's look at them one by one. @@ -752,9 +752,9 @@ Sometimes you may want to customize the order of the branches. You can do this b Mermaid follows the given precedence order of the `order` keyword. -- Main branch is always shown first as it has default order value of `0`. (unless its order is modified and changed from `0` using the `mainBranchOrder` keyword in the config) -- Next, All branches without an `order` are shown in the order of their appearance in the diagram code. -- Next, All branches with an `order` are shown in the order of their `order` value. +- Main branch is always shown first as it has default order value of `0`. (unless its order is modified and changed from `0` using the `mainBranchOrder` keyword in the config) +- Next, All branches without an `order` are shown in the order of their appearance in the diagram code. +- Next, All branches with an `order` are shown in the order of their `order` value. To fully control the order of all the branches, you must define `order` for all the branches. @@ -821,11 +821,11 @@ Mermaid supports a bunch of pre-defined themes which you can use to find the rig The following are the different pre-defined theme options: -- `base` -- `forest` -- `dark` -- `default` -- `neutral` +- `base` +- `forest` +- `dark` +- `default` +- `neutral` **NOTE**: To change theme you can either use the `initialize` call or _directives_. Learn more about [directives](./directives.md) Let's put them to use, and see how our sample diagram looks in different themes: diff --git a/docs/integrations.md b/docs/integrations.md index 9609afe21..54015b96b 100644 --- a/docs/integrations.md +++ b/docs/integrations.md @@ -8,144 +8,144 @@ They also serve as proof of concept, for the variety of things that can be built ## Productivity -- [GitHub](https://github.com) (**Native support**) - - [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) (**Native support**) - - [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action) - - [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator) -- [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) (**Native support**) -- [Gitea](https://gitea.io) (**Native support**) -- [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) (**Native support**) -- [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) (**Native support**) -- [Joplin](https://joplinapp.org) (**Native support**) -- [Notion](https://notion.so) (**Native support**) -- [Observable](https://observablehq.com/@observablehq/mermaid) (**Native support**) -- [GitBook](https://gitbook.com) - - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid) - - [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli) - - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf) -- [LiveBook](https://livebook.dev) (**Native support**) -- [Atlassian Products](https://www.atlassian.com) - - [Mermaid Plugin for Confluence](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview) - - [CloudScript.io Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview) - - [Auto convert diagrams in Jira](https://github.com/coddingtonbear/jirafs-mermaid) -- [Redmine](https://redmine.org) - - [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro) - - [redmine-mermaid](https://github.com/styz/redmine_mermaid) - - [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin) -- [Jetsbrain IDE eg Pycharm](https://www.jetbrains.com/go/guide/tips/mermaid-js-support-in-markdown/) +- [GitHub](https://github.com) (**Native support**) + - [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) (**Native support**) + - [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action) + - [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator) +- [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) (**Native support**) +- [Gitea](https://gitea.io) (**Native support**) +- [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) (**Native support**) +- [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) (**Native support**) +- [Joplin](https://joplinapp.org) (**Native support**) +- [Notion](https://notion.so) (**Native support**) +- [Observable](https://observablehq.com/@observablehq/mermaid) (**Native support**) +- [GitBook](https://gitbook.com) + - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid) + - [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli) + - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf) +- [LiveBook](https://livebook.dev) (**Native support**) +- [Atlassian Products](https://www.atlassian.com) + - [Mermaid Plugin for Confluence](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview) + - [CloudScript.io Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview) + - [Auto convert diagrams in Jira](https://github.com/coddingtonbear/jirafs-mermaid) +- [Redmine](https://redmine.org) + - [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro) + - [redmine-mermaid](https://github.com/styz/redmine_mermaid) + - [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin) +- [Jetsbrain IDE eg Pycharm](https://www.jetbrains.com/go/guide/tips/mermaid-js-support-in-markdown/) ## CRM/ERP/Similar -- [coreBOS](https://blog.corebos.org/blog/december2019) +- [coreBOS](https://blog.corebos.org/blog/december2019) ## Blogs -- [Wordpress](https://wordpress.org) - - [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md) - - [WP-ReliableMD](https://wordpress.org/plugins/wp-reliablemd/) -- [Hexo](https://hexo.io) - - [hexo-filter-mermaid-diagrams](https://github.com/webappdevelp/hexo-filter-mermaid-diagrams) - - [hexo-tag-mermaid](https://github.com/JameChou/hexo-tag-mermaid) - - [hexo-mermaid-diagrams](https://github.com/mslxl/hexo-mermaid-diagrams) +- [Wordpress](https://wordpress.org) + - [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md) + - [WP-ReliableMD](https://wordpress.org/plugins/wp-reliablemd/) +- [Hexo](https://hexo.io) + - [hexo-filter-mermaid-diagrams](https://github.com/webappdevelp/hexo-filter-mermaid-diagrams) + - [hexo-tag-mermaid](https://github.com/JameChou/hexo-tag-mermaid) + - [hexo-mermaid-diagrams](https://github.com/mslxl/hexo-mermaid-diagrams) ## CMS -- [VuePress](https://vuepress.vuejs.org/) - - [Plugin for Mermaid.js](https://github.com/eFrane/vuepress-plugin-mermaidjs) -- [Grav CMS](https://getgrav.org/) - - [Mermaid Diagrams](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams) - - [Gitlab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter) +- [VuePress](https://vuepress.vuejs.org/) + - [Plugin for Mermaid.js](https://github.com/eFrane/vuepress-plugin-mermaidjs) +- [Grav CMS](https://getgrav.org/) + - [Mermaid Diagrams](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams) + - [Gitlab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter) ## Communication -- [Discourse](https://discourse.org) - - [Mermaid Plugin](https://github.com/pnewell/discourse-mermaid), [And](https://github.com/unfoldingWord-dev/discourse-mermaid) -- [Mattermost](https://mattermost.com/) - - [Mermaid Plugin](https://github.com/SpikeTings/Mermaid) -- [phpBB](https://phpbb.com) - - [phpbb-ext-mermaid](https://github.com/AlfredoRamos/phpbb-ext-mermaid) -- [NodeBB](https://nodebb.org) - - [Mermaid Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid) +- [Discourse](https://discourse.org) + - [Mermaid Plugin](https://github.com/pnewell/discourse-mermaid), [And](https://github.com/unfoldingWord-dev/discourse-mermaid) +- [Mattermost](https://mattermost.com/) + - [Mermaid Plugin](https://github.com/SpikeTings/Mermaid) +- [phpBB](https://phpbb.com) + - [phpbb-ext-mermaid](https://github.com/AlfredoRamos/phpbb-ext-mermaid) +- [NodeBB](https://nodebb.org) + - [Mermaid Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid) ## Wikis -- [MediaWiki](https://www.mediawiki.org) - - [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid) - - [Flex Diagrams Extension](https://www.mediawiki.org/wiki/Extension:Flex_Diagrams) -- [Semantic Media Wiki](https://semantic-mediawiki.org) - - [Mermaid Plugin](https://github.com/SemanticMediaWiki/Mermaid) -- [FosWiki](https://foswiki.org) - - [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin) -- [DokuWiki](https://dokuwiki.org) - - [Flowcharts](https://www.dokuwiki.org/plugin:flowcharts?s[]=mermaid) - - [ComboStrap](https://combostrap.com/mermaid) -- [TiddlyWiki](https://tiddlywiki.com/) - - [mermaid-tw5: full js library](https://github.com/efurlanm/mermaid-tw5) - - [tw5-mermaid: wrapper for Mermaid Live](https://github.com/jasonmhoule/tw5-mermaid) +- [MediaWiki](https://www.mediawiki.org) + - [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid) + - [Flex Diagrams Extension](https://www.mediawiki.org/wiki/Extension:Flex_Diagrams) +- [Semantic Media Wiki](https://semantic-mediawiki.org) + - [Mermaid Plugin](https://github.com/SemanticMediaWiki/Mermaid) +- [FosWiki](https://foswiki.org) + - [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin) +- [DokuWiki](https://dokuwiki.org) + - [Flowcharts](https://www.dokuwiki.org/plugin:flowcharts?s[]=mermaid) + - [ComboStrap](https://combostrap.com/mermaid) +- [TiddlyWiki](https://tiddlywiki.com/) + - [mermaid-tw5: full js library](https://github.com/efurlanm/mermaid-tw5) + - [tw5-mermaid: wrapper for Mermaid Live](https://github.com/jasonmhoule/tw5-mermaid) ## Editor Plugins -- [Vs Code](https://code.visualstudio.com/) - - [Markdown Preview Mermaid Support](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid) - - [Mermaid Preview](https://marketplace.visualstudio.com/items?itemName=vstirbu.vscode-mermaid-preview) - - [Mermaid Markdown Syntax Highlighting](https://marketplace.visualstudio.com/items?itemName=bpruitt-goddard.mermaid-markdown-syntax-highlighting) - - [Mermaid Editor](https://marketplace.visualstudio.com/items?itemName=tomoyukim.vscode-mermaid-editor) - - [Mermaid Export](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.mermaid-export) - - [Markdown PDF](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf) - - [Preview](https://marketplace.visualstudio.com/items?itemName=searKing.preview-vscode) - - [Preview Sequence Diagrams](https://marketplace.visualstudio.com/items?itemName=arichika.previewseqdiag-vscode) -- [Markdown-It](https://github.com/markdown-it/markdown-it) - - [Textual UML Parser](https://github.com/manastalukdar/markdown-it-textual-uml) - - [Mermaid Plugin](https://github.com/tylingsoft/markdown-it-mermaid) - - [md-it-mermaid](https://github.com/iamcco/md-it-mermaid) - - [markdown-it-mermaid-fence-new](https://github.com/Revomatico/markdown-it-mermaid-fence-new) - - [markdown-it-mermaid-less](https://github.com/searKing/markdown-it-mermaid-less) -- [Atom](https://atom.io) - - [Markdown Preview Enhanced](https://atom.io/packages/markdown-preview-enhanced) - - [Atom Mermaid](https://atom.io/packages/atom-mermaid) - - [Language Mermaid Syntax Highlighter](https://atom.io/packages/language-mermaid) -- [Sublime Text 3](https://sublimetext.com) - - [Mermaid Package](https://packagecontrol.io/packages/Mermaid) -- [Astah](https://astah.net) - - [Export to Mermaid](https://github.com/Avens666/Astah_Jude_UML_export_to_Markdown-mermaid-Plantuml-) -- [Light Table](http://lighttable.com/) - - [Mermaid Plugin](https://github.com/cldwalker/Mermaid) -- [Draw.io](https://draw.io) - [Plugin](https://github.com/nopeslide/drawio_mermaid_plugin) -- [Inkdrop](https://www.inkdrop.app) - [Plugin](https://github.com/inkdropapp/inkdrop-mermaid) -- [Vim](https://www.vim.org) - - [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram) -- [GNU Emacs](https://www.gnu.org/software/emacs/) - - [Major mode for .mmd files](https://github.com/abrochard/mermaid-mode) - - [Org-Mode integration](https://github.com/arnm/ob-mermaid) -- [Brackets](https://brackets.io/) - - [Mermaid Preview](https://github.com/AlanHohn/mermaid-preview) -- [Iodide](https://github.com/iodide-project/iodide) - - [iodide-mermaid-plugin](https://github.com/iodide-project/iodide-mermaid-plugin) -- [Google docs](https://docs.google.com/) - - [Mermaid plugin for google docs](https://workspace.google.com/marketplace/app/mermaid/636321283856) -- [Podlite](https://github.com/zag/podlite-desktop) - - [Named block =Diagram](https://github.com/zag/podlite/tree/main/packages/podlite-diagrams) -- [GNU Nano](https://www.nano-editor.org/) - - [Nano Mermaid](https://github.com/Yash-Singh1/nano-mermaid) +- [Vs Code](https://code.visualstudio.com/) + - [Markdown Preview Mermaid Support](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid) + - [Mermaid Preview](https://marketplace.visualstudio.com/items?itemName=vstirbu.vscode-mermaid-preview) + - [Mermaid Markdown Syntax Highlighting](https://marketplace.visualstudio.com/items?itemName=bpruitt-goddard.mermaid-markdown-syntax-highlighting) + - [Mermaid Editor](https://marketplace.visualstudio.com/items?itemName=tomoyukim.vscode-mermaid-editor) + - [Mermaid Export](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.mermaid-export) + - [Markdown PDF](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf) + - [Preview](https://marketplace.visualstudio.com/items?itemName=searKing.preview-vscode) + - [Preview Sequence Diagrams](https://marketplace.visualstudio.com/items?itemName=arichika.previewseqdiag-vscode) +- [Markdown-It](https://github.com/markdown-it/markdown-it) + - [Textual UML Parser](https://github.com/manastalukdar/markdown-it-textual-uml) + - [Mermaid Plugin](https://github.com/tylingsoft/markdown-it-mermaid) + - [md-it-mermaid](https://github.com/iamcco/md-it-mermaid) + - [markdown-it-mermaid-fence-new](https://github.com/Revomatico/markdown-it-mermaid-fence-new) + - [markdown-it-mermaid-less](https://github.com/searKing/markdown-it-mermaid-less) +- [Atom](https://atom.io) + - [Markdown Preview Enhanced](https://atom.io/packages/markdown-preview-enhanced) + - [Atom Mermaid](https://atom.io/packages/atom-mermaid) + - [Language Mermaid Syntax Highlighter](https://atom.io/packages/language-mermaid) +- [Sublime Text 3](https://sublimetext.com) + - [Mermaid Package](https://packagecontrol.io/packages/Mermaid) +- [Astah](https://astah.net) + - [Export to Mermaid](https://github.com/Avens666/Astah_Jude_UML_export_to_Markdown-mermaid-Plantuml-) +- [Light Table](http://lighttable.com/) + - [Mermaid Plugin](https://github.com/cldwalker/Mermaid) +- [Draw.io](https://draw.io) - [Plugin](https://github.com/nopeslide/drawio_mermaid_plugin) +- [Inkdrop](https://www.inkdrop.app) - [Plugin](https://github.com/inkdropapp/inkdrop-mermaid) +- [Vim](https://www.vim.org) + - [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram) +- [GNU Emacs](https://www.gnu.org/software/emacs/) + - [Major mode for .mmd files](https://github.com/abrochard/mermaid-mode) + - [Org-Mode integration](https://github.com/arnm/ob-mermaid) +- [Brackets](https://brackets.io/) + - [Mermaid Preview](https://github.com/AlanHohn/mermaid-preview) +- [Iodide](https://github.com/iodide-project/iodide) + - [iodide-mermaid-plugin](https://github.com/iodide-project/iodide-mermaid-plugin) +- [Google docs](https://docs.google.com/) + - [Mermaid plugin for google docs](https://workspace.google.com/marketplace/app/mermaid/636321283856) +- [Podlite](https://github.com/zag/podlite-desktop) + - [Named block =Diagram](https://github.com/zag/podlite/tree/main/packages/podlite-diagrams) +- [GNU Nano](https://www.nano-editor.org/) + - [Nano Mermaid](https://github.com/Yash-Singh1/nano-mermaid) ## Document Generation -- [Sphinx](https://www.sphinx-doc.org/en/master/) - - [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid) -- [remark.js](https://remark.js.org/) - - [remark-mermaid](https://github.com/temando/remark-mermaid) -- [jSDoc](https://jsdoc.app/) - - [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid) -- [MkDocs](https://mkdocs.org) - - [mkdocs-mermaid2-plugin](https://github.com/fralau/mkdocs-mermaid2-plugin) - - [mkdocs-material](https://github.com/squidfunk/mkdocs-material), check the [docs](https://squidfunk.github.io/mkdocs-material/reference/diagrams/) -- [Type Doc](https://typedoc.org/) - - [typedoc-plugin-mermaid](https://www.npmjs.com/package/typedoc-plugin-mermaid) -- [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) (Native support in theme) -- [Codedoc](https://codedoc.cc/) - - [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin) -- [mdbook](https://rust-lang.github.io/mdBook/index.html) - - [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid) +- [Sphinx](https://www.sphinx-doc.org/en/master/) + - [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid) +- [remark.js](https://remark.js.org/) + - [remark-mermaid](https://github.com/temando/remark-mermaid) +- [jSDoc](https://jsdoc.app/) + - [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid) +- [MkDocs](https://mkdocs.org) + - [mkdocs-mermaid2-plugin](https://github.com/fralau/mkdocs-mermaid2-plugin) + - [mkdocs-material](https://github.com/squidfunk/mkdocs-material), check the [docs](https://squidfunk.github.io/mkdocs-material/reference/diagrams/) +- [Type Doc](https://typedoc.org/) + - [typedoc-plugin-mermaid](https://www.npmjs.com/package/typedoc-plugin-mermaid) +- [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) (Native support in theme) +- [Codedoc](https://codedoc.cc/) + - [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin) +- [mdbook](https://rust-lang.github.io/mdBook/index.html) + - [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid) ## Browser Extensions @@ -165,15 +165,15 @@ They also serve as proof of concept, for the variety of things that can be built ## Other -- [Jekyll](https://jekyllrb.com/) - - [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid) - - [jekyll-mermaid-diagrams](https://github.com/fuzhibo/jekyll-mermaid-diagrams) -- [Reveal.js](https://github.com/hakimel/reveal.js) - - [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin) -- [Bisheng](https://www.npmjs.com/package/bisheng) - - [bisheng-plugin-mermaid](https://github.com/yct21/bisheng-plugin-mermaid) -- [Reveal CK](https://github.com/jedcn/reveal-ck) - - [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin) -- [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server) -- [ExDoc](https://github.com/elixir-lang/ex_doc) - - [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs) +- [Jekyll](https://jekyllrb.com/) + - [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid) + - [jekyll-mermaid-diagrams](https://github.com/fuzhibo/jekyll-mermaid-diagrams) +- [Reveal.js](https://github.com/hakimel/reveal.js) + - [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin) +- [Bisheng](https://www.npmjs.com/package/bisheng) + - [bisheng-plugin-mermaid](https://github.com/yct21/bisheng-plugin-mermaid) +- [Reveal CK](https://github.com/jedcn/reveal-ck) + - [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin) +- [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server) +- [ExDoc](https://github.com/elixir-lang/ex_doc) + - [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs) diff --git a/docs/landing/index.html b/docs/landing/index.html index 4b04a98ce..9b1e3749f 100644 --- a/docs/landing/index.html +++ b/docs/landing/index.html @@ -49,16 +49,7 @@ <div class="pt-24"> <div style="" - class=" - container - lg:px-24 - max-w-5xl - px-4 - mx-auto - flex flex-wrap flex-col - md:flex-row - items-center - " + class="container lg:px-24 max-w-5xl px-4 mx-auto flex flex-wrap flex-col md:flex-row items-center" > <!--Left Col--> <div class="w-full md:w-1/2"> @@ -77,24 +68,7 @@ > <button style="background: #ffa41c; border: 1px solid #ff8f00" - class=" - mx-auto - lg:mx-0 - hover:underline - text-black - font-bold - rounded-full - my-6 - py-4 - px-8 - shadow-lg - focus:outline-none focus:shadow-outline - transform - transition - hover:scale-105 - duration-300 - ease-in-out - " + class="mx-auto lg:mx-0 hover:underline text-black font-bold rounded-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out" > Purchase on Amazon </button> @@ -352,25 +326,7 @@ > <button style="background: #ffa41c; border: 1px solid #ff8f00" - class=" - mx-auto - lg:mx-0 - hover:underline - bg-white - text-gray-800 - font-bold - rounded-full - my-6 - py-4 - px-8 - shadow-lg - focus:outline-none focus:shadow-outline - transform - transition - hover:scale-105 - duration-300 - ease-in-out - " + class="mx-auto lg:mx-0 hover:underline bg-white text-gray-800 font-bold rounded-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out" > Purchase Now on Amazon </button> diff --git a/docs/n00b-gettingStarted.md b/docs/n00b-gettingStarted.md index 53144d755..803af1234 100644 --- a/docs/n00b-gettingStarted.md +++ b/docs/n00b-gettingStarted.md @@ -87,7 +87,7 @@ c. The `mermaid.initialize()` call, which dictates the appearance of diagrams an ```html <body> - <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> + <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> </body> ``` @@ -95,10 +95,10 @@ c. The `mermaid.initialize()` call, which dictates the appearance of diagrams an ```html <body> - Here is a mermaid diagram: - <div class="mermaid"> - graph TD A[Client] --> B[Load Balancer] B --> C[Server01] B --> D[Server02] - </div> + Here is a mermaid diagram: + <div class="mermaid"> + graph TD A[Client] --> B[Load Balancer] B --> C[Server01] B --> D[Server02] + </div> </body> ``` @@ -110,9 +110,9 @@ c. The `mermaid.initialize()` call, which dictates the appearance of diagrams an ```html <body> - <script> - mermaid.initialize({ startOnLoad: true }); - </script> + <script> + mermaid.initialize({ startOnLoad: true }); + </script> </body> ``` @@ -131,23 +131,23 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac ```html <html> - <body> - <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> - <script> - mermaid.initialize({ startOnLoad: true }); - </script> + <body> + <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> + <script> + mermaid.initialize({ startOnLoad: true }); + </script> - Here is one mermaid diagram: - <div class="mermaid"> - graph TD A[Client] --> B[Load Balancer] B --> C[Server1] B --> D[Server2] - </div> + Here is one mermaid diagram: + <div class="mermaid"> + graph TD A[Client] --> B[Load Balancer] B --> C[Server1] B --> D[Server2] + </div> - And here is another: - <div class="mermaid"> - graph TD A[Client] -->|tcp_123| B B(Load Balancer) B -->|tcp_456| C[Server1] B - -->|tcp_456| D[Server2] - </div> - </body> + And here is another: + <div class="mermaid"> + graph TD A[Client] -->|tcp_123| B B(Load Balancer) B -->|tcp_456| C[Server1] B -->|tcp_456| + D[Server2] + </div> + </body> </html> ``` @@ -156,19 +156,19 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file, ```html <html lang="en"> - <head> - <meta charset="utf-8" /> - </head> - <body> - <div class="mermaid">graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);</div> - <div class="mermaid"> - graph TD A[Client] --> B[Load Balancer] B --> C[Server1] B --> D[Server2] - </div> - <script src="The\Path\In\Your\Package\mermaid.js"></script> - <script> - mermaid.initialize({ startOnLoad: true }); - </script> - </body> + <head> + <meta charset="utf-8" /> + </head> + <body> + <div class="mermaid">graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);</div> + <div class="mermaid"> + graph TD A[Client] --> B[Load Balancer] B --> C[Server1] B --> D[Server2] + </div> + <script src="The\Path\In\Your\Package\mermaid.js"></script> + <script> + mermaid.initialize({ startOnLoad: true }); + </script> + </body> </html> ``` @@ -189,4 +189,4 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file, **Comments from Knut Sveidqvist, creator of mermaid:** -- In early versions of mermaid, the `<script src>` tag was invoked in the `<head>` part of the web page. Nowadays we can place it in the `<body>` as seen above. Older parts of the documentation frequently reflects the previous way which still works. +- In early versions of mermaid, the `<script src>` tag was invoked in the `<head>` part of the web page. Nowadays we can place it in the `<body>` as seen above. Older parts of the documentation frequently reflects the previous way which still works. diff --git a/docs/n00b-overview.md b/docs/n00b-overview.md index 83723e0a2..1eaffd4e8 100644 --- a/docs/n00b-overview.md +++ b/docs/n00b-overview.md @@ -28,7 +28,7 @@ It is a relatively straightforward solution to a significant hurdle with the sof ```html <div class="mermaid"> - graph TD A[Client] --> B[Load Balancer] B --> C[Server01] B --> D[Server02] + graph TD A[Client] --> B[Load Balancer] B --> C[Server01] B --> D[Server02] </div> ``` @@ -42,10 +42,10 @@ It is a relatively straightforward solution to a significant hurdle with the sof ## Advantages of using Mermaid -- Ease to generate, modify and render diagrams when you make them. -- The number of integrations and plugins it has. -- You can add it to your or companies website. -- Diagrams can be created through comments like this in a script: +- Ease to generate, modify and render diagrams when you make them. +- The number of integrations and plugins it has. +- You can add it to your or companies website. +- Diagrams can be created through comments like this in a script: ## The catch-22 of Diagrams and Charts: diff --git a/docs/newDiagram.md b/docs/newDiagram.md index a939c8d37..e2191f1de 100644 --- a/docs/newDiagram.md +++ b/docs/newDiagram.md @@ -10,8 +10,8 @@ This would be to define a jison grammar for the new diagram type. That should st For instance: -- the flowchart starts with the keyword graph. -- the sequence diagram starts with the keyword sequenceDiagram +- the flowchart starts with the keyword graph. +- the sequence diagram starts with the keyword sequenceDiagram #### Store data found during parsing @@ -38,7 +38,7 @@ The `yy` object has the following function: ```javascript exports.parseError = function (err, hash) { - mermaid.parseError(err, hash); + mermaid.parseError(err, hash); }; ``` @@ -110,10 +110,10 @@ If you are using a dagre based layout, please use flowchart-v2 as a template and There are a few features that are common between the different types of diagrams. We try to standardize the diagrams that work as similar as possible for the end user. The commonalities are: -- Directives, a way of modifying the diagram configuration from within the diagram code. -- Accessibility, a way for an author to provide additional information like titles and descriptions to people accessing a text with diagrams using a screen reader. -- Themes, there is a common way to modify the styling of diagrams in Mermaid. -- Comments should follow mermaid standards +- Directives, a way of modifying the diagram configuration from within the diagram code. +- Accessibility, a way for an author to provide additional information like titles and descriptions to people accessing a text with diagrams using a screen reader. +- Themes, there is a common way to modify the styling of diagrams in Mermaid. +- Comments should follow mermaid standards Here some pointers on how to handle these different areas. @@ -236,7 +236,7 @@ This function will in turn call a function _your diagram should provide_ returni ```js const getStyles = (options) => - ` + ` .line { stroke-width: 1; stroke: ${options.lineColor}; @@ -250,11 +250,11 @@ Note that you need to provide your function to the main getStyles by adding it i ```js const themes = { - flowchart, - 'flowchart-v2': flowchart, - sequence, - xyzDiagram, - //... + flowchart, + 'flowchart-v2': flowchart, + sequence, + xyzDiagram, + //... }; ``` diff --git a/docs/pie.md b/docs/pie.md index cf616fd93..1e13e3872 100644 --- a/docs/pie.md +++ b/docs/pie.md @@ -25,13 +25,13 @@ pie title Pets adopted by volunteers Drawing a pie chart is really simple in mermaid. -- Start with `pie` keyword to begin the diagram - - `showData` to render the actual data values after the legend text. This is **_OPTIONAL_** -- Followed by `title` keyword and its value in string to give a title to the pie-chart. This is **_OPTIONAL_** -- Followed by dataSet - - `label` for a section in the pie diagram within `" "` quotes. - - Followed by `:` colon as separator - - Followed by `positive numeric value` (supported upto two decimal places) +- Start with `pie` keyword to begin the diagram + - `showData` to render the actual data values after the legend text. This is **_OPTIONAL_** +- Followed by `title` keyword and its value in string to give a title to the pie-chart. This is **_OPTIONAL_** +- Followed by dataSet + - `label` for a section in the pie diagram within `" "` quotes. + - Followed by `:` colon as separator + - Followed by `positive numeric value` (supported upto two decimal places) \[pie] \[showData] (OPTIONAL) \[title] \[titlevalue] (OPTIONAL) diff --git a/docs/sequenceDiagram.md b/docs/sequenceDiagram.md index 2ece618b1..ae0bd5e45 100644 --- a/docs/sequenceDiagram.md +++ b/docs/sequenceDiagram.md @@ -514,7 +514,7 @@ It is possible to get a sequence number attached to each arrow in a sequence dia ```html <script> - mermaid.initialize({ sequence: { showSequenceNumbers: true } }); + mermaid.initialize({ sequence: { showSequenceNumbers: true } }); </script> ``` @@ -624,81 +624,81 @@ Styling of a sequence diagram is done by defining a number of css classes. Durin ```css body { - background: white; + background: white; } .actor { - stroke: #ccccff; - fill: #ececff; + stroke: #ccccff; + fill: #ececff; } text.actor { - fill: black; - stroke: none; - font-family: Helvetica; + fill: black; + stroke: none; + font-family: Helvetica; } .actor-line { - stroke: grey; + stroke: grey; } .messageLine0 { - stroke-width: 1.5; - stroke-dasharray: '2 2'; - marker-end: 'url(#arrowhead)'; - stroke: black; + stroke-width: 1.5; + stroke-dasharray: '2 2'; + marker-end: 'url(#arrowhead)'; + stroke: black; } .messageLine1 { - stroke-width: 1.5; - stroke-dasharray: '2 2'; - stroke: black; + stroke-width: 1.5; + stroke-dasharray: '2 2'; + stroke: black; } #arrowhead { - fill: black; + fill: black; } .messageText { - fill: black; - stroke: none; - font-family: 'trebuchet ms', verdana, arial; - font-size: 14px; + fill: black; + stroke: none; + font-family: 'trebuchet ms', verdana, arial; + font-size: 14px; } .labelBox { - stroke: #ccccff; - fill: #ececff; + stroke: #ccccff; + fill: #ececff; } .labelText { - fill: black; - stroke: none; - font-family: 'trebuchet ms', verdana, arial; + fill: black; + stroke: none; + font-family: 'trebuchet ms', verdana, arial; } .loopText { - fill: black; - stroke: none; - font-family: 'trebuchet ms', verdana, arial; + fill: black; + stroke: none; + font-family: 'trebuchet ms', verdana, arial; } .loopLine { - stroke-width: 2; - stroke-dasharray: '2 2'; - marker-end: 'url(#arrowhead)'; - stroke: #ccccff; + stroke-width: 2; + stroke-dasharray: '2 2'; + marker-end: 'url(#arrowhead)'; + stroke: #ccccff; } .note { - stroke: #decc93; - fill: #fff5ad; + stroke: #decc93; + fill: #fff5ad; } .noteText { - fill: black; - stroke: none; - font-family: 'trebuchet ms', verdana, arial; - font-size: 14px; + fill: black; + stroke: none; + font-family: 'trebuchet ms', verdana, arial; + font-size: 14px; } ``` @@ -712,12 +712,12 @@ How to use the CLI is described in the [mermaidCLI](mermaidCLI) page. ```javascript mermaid.sequenceConfig = { - diagramMarginX: 50, - diagramMarginY: 10, - boxTextMargin: 5, - noteMargin: 10, - messageMargin: 35, - mirrorActors: true, + diagramMarginX: 50, + diagramMarginY: 10, + boxTextMargin: 5, + noteMargin: 10, + messageMargin: 35, + mirrorActors: true, }; ``` diff --git a/docs/theme.css b/docs/theme.css index 15be9db1c..28dbc0ab5 100644 --- a/docs/theme.css +++ b/docs/theme.css @@ -1,3 +1,827 @@ -@import url("https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600");*{-webkit-font-smoothing:antialiased;-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:none;-webkit-touch-callout:none;box-sizing:border-box} +@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600'); +* { + -webkit-font-smoothing: antialiased; + -webkit-overflow-scrolling: touch; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-text-size-adjust: none; + -webkit-touch-callout: none; + box-sizing: border-box; +} -body:not(.ready){overflow:hidden}body:not(.ready) .app-nav,body:not(.ready)>nav,body:not(.ready) [data-cloak]{display:none}div#app{font-size:30px;font-weight:lighter;margin:40vh auto;text-align:center}div#app:empty:before{content:"Loading..."}.emoji{height:1.2rem;vertical-align:middle}.progress{background-color:var(--theme-color,#42b983);height:2px;left:0;position:fixed;right:0;top:0;transition:width .2s,opacity .4s;width:0;z-index:999999}.search .search-keyword,.search a:hover{color:var(--theme-color,#42b983)}.search .search-keyword{font-style:normal;font-weight:700}body,html{height:100%}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:#34495e;font-family:Source Sans Pro,Helvetica Neue,Arial,sans-serif;font-size:15px;letter-spacing:0;margin:0;overflow-x:hidden}img{max-width:100%}a[disabled]{cursor:not-allowed;opacity:.6}kbd{border:1px solid #ccc;border-radius:3px;display:inline-block;font-size:12px!important;line-height:12px;margin-bottom:3px;padding:3px 5px;vertical-align:middle}li input[type=checkbox]{margin:0 .2em .25em 0;vertical-align:middle}.app-nav{margin:25px 60px 0 0;position:absolute;right:0;text-align:right;z-index:10}.app-nav.no-badge{margin-right:25px}.app-nav p{margin:0}.app-nav>a{margin:0 1rem;padding:5px 0}.app-nav li,.app-nav ul{display:inline-block;list-style:none;margin:0}.app-nav a{color:inherit;font-size:16px;text-decoration:none;transition:color .3s}.app-nav a.active,.app-nav a:hover{color:var(--theme-color,#42b983)}.app-nav a.active{border-bottom:2px solid var(--theme-color,#42b983)}.app-nav li{display:inline-block;margin:0 1rem;padding:5px 0;position:relative;cursor:pointer}.app-nav li ul{background-color:#fff;border:1px solid;border-color:#ddd #ddd #ccc;border-radius:4px;box-sizing:border-box;display:none;max-height:calc(100vh - 61px);overflow-y:auto;padding:10px 0;position:absolute;right:-15px;text-align:left;top:100%;white-space:nowrap}.app-nav li ul li{display:block;font-size:14px;line-height:1rem;margin:8px 14px;white-space:nowrap}.app-nav li ul a{display:block;font-size:inherit;margin:0;padding:0}.app-nav li ul a.active{border-bottom:0}.app-nav li:hover ul{display:block}.github-corner{border-bottom:0;position:fixed;right:0;text-decoration:none;top:0;z-index:1}.github-corner:hover .octo-arm{-webkit-animation:octocat-wave .56s ease-in-out;animation:octocat-wave .56s ease-in-out}.github-corner svg{color:#fff;fill:var(--theme-color,#42b983);height:80px;width:80px}main{display:block;position:relative;width:100vw;height:100%;z-index:0}main.hidden{display:none}.anchor{display:inline-block;text-decoration:none;transition:all .3s}.anchor span{color:#34495e}.anchor:hover{text-decoration:underline}.sidebar{border-right:1px solid rgba(0,0,0,.07);overflow-y:auto;padding:40px 0 0;position:absolute;top:0;bottom:0;left:0;transition:transform .25s ease-out;width:300px;z-index:20}.sidebar>h1{margin:0 auto 1rem;font-size:1.5rem;font-weight:300;text-align:center}.sidebar>h1 a{color:inherit;text-decoration:none}.sidebar>h1 .app-nav{display:block;position:static}.sidebar .sidebar-nav{line-height:2em;padding-bottom:40px}.sidebar li.collapse .app-sub-sidebar{display:none}.sidebar ul{margin:0 0 0 15px;padding:0}.sidebar li>p{font-weight:700;margin:0}.sidebar ul,.sidebar ul li{list-style:none}.sidebar ul li a{border-bottom:none;display:block}.sidebar ul li ul{padding-left:20px}.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-thumb{background:transparent;border-radius:4px}.sidebar:hover::-webkit-scrollbar-thumb{background:hsla(0,0%,53.3%,.4)}.sidebar:hover::-webkit-scrollbar-track{background:hsla(0,0%,53.3%,.1)}.sidebar-toggle{background-color:transparent;background-color:hsla(0,0%,100%,.8);border:0;outline:none;padding:10px;position:absolute;bottom:0;left:0;text-align:center;transition:opacity .3s;width:284px;z-index:30;cursor:pointer}.sidebar-toggle:hover .sidebar-toggle-button{opacity:.4}.sidebar-toggle span{background-color:var(--theme-color,#42b983);display:block;margin-bottom:4px;width:16px;height:2px}body.sticky .sidebar,body.sticky .sidebar-toggle{position:fixed}.content{padding-top:60px;position:absolute;top:0;right:0;bottom:0;left:300px;transition:left .25s ease}.markdown-section{margin:0 auto;max-width:80%;padding:30px 15px 40px;position:relative}.markdown-section>*{box-sizing:border-box;font-size:inherit}.markdown-section>:first-child{margin-top:0!important}.markdown-section hr{border:none;border-bottom:1px solid #eee;margin:2em 0}.markdown-section iframe{border:1px solid #eee;width:1px;min-width:100%}.markdown-section table{border-collapse:collapse;border-spacing:0;display:block;margin-bottom:1rem;overflow:auto;width:100%}.markdown-section th{font-weight:700}.markdown-section td,.markdown-section th{border:1px solid #ddd;padding:6px 13px}.markdown-section tr{border-top:1px solid #ccc}.markdown-section p.tip,.markdown-section tr:nth-child(2n){background-color:#f8f8f8}.markdown-section p.tip{border-bottom-right-radius:2px;border-left:4px solid #f66;border-top-right-radius:2px;margin:2em 0;padding:12px 24px 12px 30px;position:relative}.markdown-section p.tip:before{background-color:#f66;border-radius:100%;color:#fff;content:"!";font-family:Dosis,Source Sans Pro,Helvetica Neue,Arial,sans-serif;font-size:14px;font-weight:700;left:-12px;line-height:20px;position:absolute;height:20px;width:20px;text-align:center;top:14px}.markdown-section p.tip code{background-color:#efefef}.markdown-section p.tip em{color:#34495e}.markdown-section p.warn{background:rgba(66,185,131,.1);border-radius:2px;padding:1rem}.markdown-section ul.task-list>li{list-style-type:none}body.close .sidebar{transform:translateX(-300px)}body.close .sidebar-toggle{width:auto}body.close .content{left:0}@media print{.app-nav,.github-corner,.sidebar,.sidebar-toggle{display:none}}@media screen and (max-width:768px){.github-corner,.sidebar,.sidebar-toggle{position:fixed}.app-nav{margin-top:16px}.app-nav li ul{top:30px}main{height:auto;overflow-x:hidden}.sidebar{left:-300px;transition:transform .25s ease-out}.content{left:0;max-width:100vw;position:static;padding-top:20px;transition:transform .25s ease}.app-nav,.github-corner{transition:transform .25s ease-out}.sidebar-toggle{background-color:transparent;width:auto;padding:30px 30px 10px 10px}body.close .sidebar{transform:translateX(300px)}body.close .sidebar-toggle{background-color:hsla(0,0%,100%,.8);transition:background-color 1s;width:284px;padding:10px}body.close .content{transform:translateX(300px)}body.close .app-nav,body.close .github-corner{display:none}.github-corner:hover .octo-arm{-webkit-animation:none;animation:none}.github-corner .octo-arm{-webkit-animation:octocat-wave .56s ease-in-out;animation:octocat-wave .56s ease-in-out}}@-webkit-keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}section.cover{align-items:center;background-position:50%;background-repeat:no-repeat;background-size:cover;height:100vh;width:100vw;display:none}section.cover.show{display:flex}section.cover.has-mask .mask{background-color:#fff;opacity:.8;position:absolute;top:0;height:100%;width:100%}section.cover .cover-main{flex:1;margin:-20px 16px 0;text-align:center}section.cover a{color:inherit}section.cover a,section.cover a:hover{text-decoration:none}section.cover p{line-height:1.5rem;margin:1em 0}section.cover h1{color:inherit;font-size:2.5rem;font-weight:300;margin:.625rem 0 2.5rem;position:relative;text-align:center}section.cover h1 a{display:block}section.cover h1 small{bottom:-.4375rem;font-size:1rem;position:absolute}section.cover blockquote{font-size:1.5rem;text-align:center}section.cover ul{line-height:1.8;list-style-type:none;margin:1em auto;max-width:500px;padding:0}section.cover .cover-main>p:last-child a{border-radius:2rem;border:1px solid var(--theme-color,#42b983);box-sizing:border-box;color:var(--theme-color,#42b983);display:inline-block;font-size:1.05rem;letter-spacing:.1rem;margin:.5rem 1rem;padding:.75em 2rem;text-decoration:none;transition:all .15s ease}section.cover .cover-main>p:last-child a:last-child{background-color:var(--theme-color,#42b983);color:#fff}section.cover .cover-main>p:last-child a:last-child:hover{color:inherit;opacity:.8}section.cover .cover-main>p:last-child a:hover{color:inherit}section.cover blockquote>p>a{border-bottom:2px solid var(--theme-color,#42b983);transition:color .3s}section.cover blockquote>p>a:hover{color:var(--theme-color,#42b983)}.sidebar,body{background-color:#fff}.sidebar{color:#364149}.sidebar li{margin:6px 0}.sidebar ul li a{color:#505d6b;font-size:14px;font-weight:400;overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.sidebar ul li a:hover{text-decoration:underline}.sidebar ul li ul{padding:0}.sidebar ul li.active>a{border-right:2px solid;color:var(--theme-color,#42b983);font-weight:600}.app-sub-sidebar li:before{content:"-";padding-right:4px;float:left}.markdown-section h1,.markdown-section h2,.markdown-section h3,.markdown-section h4,.markdown-section strong{color:#2c3e50;font-weight:600}.markdown-section a{color:var(--theme-color,#42b983);font-weight:600}.markdown-section h1{font-size:2rem;margin:0 0 1rem}.markdown-section h2{font-size:1.75rem;margin:45px 0 .8rem}.markdown-section h3{font-size:1.5rem;margin:40px 0 .6rem}.markdown-section h4{font-size:1.25rem}.markdown-section h5{font-size:1rem}.markdown-section h6{color:#777;font-size:1rem}.markdown-section figure,.markdown-section p{margin:1.2em 0}.markdown-section ol,.markdown-section p,.markdown-section ul{line-height:1.6rem;word-spacing:.05rem}.markdown-section ol,.markdown-section ul{padding-left:1.5rem}.markdown-section blockquote{border-left:4px solid var(--theme-color,#42b983);color:#858585;margin:2em 0;padding-left:20px}.markdown-section blockquote p{font-weight:600;margin-left:0}.markdown-section iframe{margin:1em 0}.markdown-section em{color:#7f8c8d}.markdown-section code{border-radius:2px;color:#e96900;font-size:.8rem;margin:0 2px;padding:3px 5px;white-space:pre-wrap}.markdown-section code,.markdown-section pre{background-color:#f8f8f8;font-family:Roboto Mono,Monaco,courier,monospace}.markdown-section pre{-moz-osx-font-smoothing:initial;-webkit-font-smoothing:initial;line-height:1.5rem;margin:1.2em 0;overflow:auto;padding:0 1.4rem;position:relative;word-wrap:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8e908c}.token.namespace{opacity:.7}.token.boolean,.token.number{color:#c76b29}.token.punctuation{color:#525252}.token.property{color:#c08b30}.token.tag{color:#2973b7}.token.string{color:var(--theme-color,#42b983)}.token.selector{color:#6679cc}.token.attr-name{color:#2973b7}.language-css .token.string,.style .token.string,.token.entity,.token.url{color:#22a2c9}.token.attr-value,.token.control,.token.directive,.token.unit{color:var(--theme-color,#42b983)}.token.function,.token.keyword{color:#e96900}.token.atrule,.token.regex,.token.statement{color:#22a2c9}.token.placeholder,.token.variable{color:#3d8fd1}.token.deleted{text-decoration:line-through}.token.inserted{border-bottom:1px dotted #202746;text-decoration:none}.token.italic{font-style:italic}.token.bold,.token.important{font-weight:700}.token.important{color:#c94922}.token.entity{cursor:help}.markdown-section pre>code{-moz-osx-font-smoothing:initial;-webkit-font-smoothing:initial;background-color:#f8f8f8;border-radius:2px;color:#525252;display:block;font-family:Roboto Mono,Monaco,courier,monospace;font-size:.8rem;line-height:inherit;margin:0 2px;max-width:inherit;overflow:inherit;padding:2.2em 5px;white-space:inherit}.markdown-section code:after,.markdown-section code:before{letter-spacing:.05rem}code .token{-moz-osx-font-smoothing:initial;-webkit-font-smoothing:initial;min-height:1.5rem;position:relative;left:auto}pre:after{color:#ccc;content:attr(data-lang);font-size:.6rem;font-weight:600;height:15px;line-height:15px;padding:5px 10px 0;position:absolute;right:0;text-align:right;top:0} +body:not(.ready) { + overflow: hidden; +} +body:not(.ready) .app-nav, +body:not(.ready) > nav, +body:not(.ready) [data-cloak] { + display: none; +} +div#app { + font-size: 30px; + font-weight: lighter; + margin: 40vh auto; + text-align: center; +} +div#app:empty:before { + content: 'Loading...'; +} +.emoji { + height: 1.2rem; + vertical-align: middle; +} +.progress { + background-color: var(--theme-color, #42b983); + height: 2px; + left: 0; + position: fixed; + right: 0; + top: 0; + transition: width 0.2s, opacity 0.4s; + width: 0; + z-index: 999999; +} +.search .search-keyword, +.search a:hover { + color: var(--theme-color, #42b983); +} +.search .search-keyword { + font-style: normal; + font-weight: 700; +} +body, +html { + height: 100%; +} +body { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + color: #34495e; + font-family: Source Sans Pro, Helvetica Neue, Arial, sans-serif; + font-size: 15px; + letter-spacing: 0; + margin: 0; + overflow-x: hidden; +} +img { + max-width: 100%; +} +a[disabled] { + cursor: not-allowed; + opacity: 0.6; +} +kbd { + border: 1px solid #ccc; + border-radius: 3px; + display: inline-block; + font-size: 12px !important; + line-height: 12px; + margin-bottom: 3px; + padding: 3px 5px; + vertical-align: middle; +} +li input[type='checkbox'] { + margin: 0 0.2em 0.25em 0; + vertical-align: middle; +} +.app-nav { + margin: 25px 60px 0 0; + position: absolute; + right: 0; + text-align: right; + z-index: 10; +} +.app-nav.no-badge { + margin-right: 25px; +} +.app-nav p { + margin: 0; +} +.app-nav > a { + margin: 0 1rem; + padding: 5px 0; +} +.app-nav li, +.app-nav ul { + display: inline-block; + list-style: none; + margin: 0; +} +.app-nav a { + color: inherit; + font-size: 16px; + text-decoration: none; + transition: color 0.3s; +} +.app-nav a.active, +.app-nav a:hover { + color: var(--theme-color, #42b983); +} +.app-nav a.active { + border-bottom: 2px solid var(--theme-color, #42b983); +} +.app-nav li { + display: inline-block; + margin: 0 1rem; + padding: 5px 0; + position: relative; + cursor: pointer; +} +.app-nav li ul { + background-color: #fff; + border: 1px solid; + border-color: #ddd #ddd #ccc; + border-radius: 4px; + box-sizing: border-box; + display: none; + max-height: calc(100vh - 61px); + overflow-y: auto; + padding: 10px 0; + position: absolute; + right: -15px; + text-align: left; + top: 100%; + white-space: nowrap; +} +.app-nav li ul li { + display: block; + font-size: 14px; + line-height: 1rem; + margin: 8px 14px; + white-space: nowrap; +} +.app-nav li ul a { + display: block; + font-size: inherit; + margin: 0; + padding: 0; +} +.app-nav li ul a.active { + border-bottom: 0; +} +.app-nav li:hover ul { + display: block; +} +.github-corner { + border-bottom: 0; + position: fixed; + right: 0; + text-decoration: none; + top: 0; + z-index: 1; +} +.github-corner:hover .octo-arm { + -webkit-animation: octocat-wave 0.56s ease-in-out; + animation: octocat-wave 0.56s ease-in-out; +} +.github-corner svg { + color: #fff; + fill: var(--theme-color, #42b983); + height: 80px; + width: 80px; +} +main { + display: block; + position: relative; + width: 100vw; + height: 100%; + z-index: 0; +} +main.hidden { + display: none; +} +.anchor { + display: inline-block; + text-decoration: none; + transition: all 0.3s; +} +.anchor span { + color: #34495e; +} +.anchor:hover { + text-decoration: underline; +} +.sidebar { + border-right: 1px solid rgba(0, 0, 0, 0.07); + overflow-y: auto; + padding: 40px 0 0; + position: absolute; + top: 0; + bottom: 0; + left: 0; + transition: transform 0.25s ease-out; + width: 300px; + z-index: 20; +} +.sidebar > h1 { + margin: 0 auto 1rem; + font-size: 1.5rem; + font-weight: 300; + text-align: center; +} +.sidebar > h1 a { + color: inherit; + text-decoration: none; +} +.sidebar > h1 .app-nav { + display: block; + position: static; +} +.sidebar .sidebar-nav { + line-height: 2em; + padding-bottom: 40px; +} +.sidebar li.collapse .app-sub-sidebar { + display: none; +} +.sidebar ul { + margin: 0 0 0 15px; + padding: 0; +} +.sidebar li > p { + font-weight: 700; + margin: 0; +} +.sidebar ul, +.sidebar ul li { + list-style: none; +} +.sidebar ul li a { + border-bottom: none; + display: block; +} +.sidebar ul li ul { + padding-left: 20px; +} +.sidebar::-webkit-scrollbar { + width: 4px; +} +.sidebar::-webkit-scrollbar-thumb { + background: transparent; + border-radius: 4px; +} +.sidebar:hover::-webkit-scrollbar-thumb { + background: hsla(0, 0%, 53.3%, 0.4); +} +.sidebar:hover::-webkit-scrollbar-track { + background: hsla(0, 0%, 53.3%, 0.1); +} +.sidebar-toggle { + background-color: transparent; + background-color: hsla(0, 0%, 100%, 0.8); + border: 0; + outline: none; + padding: 10px; + position: absolute; + bottom: 0; + left: 0; + text-align: center; + transition: opacity 0.3s; + width: 284px; + z-index: 30; + cursor: pointer; +} +.sidebar-toggle:hover .sidebar-toggle-button { + opacity: 0.4; +} +.sidebar-toggle span { + background-color: var(--theme-color, #42b983); + display: block; + margin-bottom: 4px; + width: 16px; + height: 2px; +} +body.sticky .sidebar, +body.sticky .sidebar-toggle { + position: fixed; +} +.content { + padding-top: 60px; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 300px; + transition: left 0.25s ease; +} +.markdown-section { + margin: 0 auto; + max-width: 80%; + padding: 30px 15px 40px; + position: relative; +} +.markdown-section > * { + box-sizing: border-box; + font-size: inherit; +} +.markdown-section > :first-child { + margin-top: 0 !important; +} +.markdown-section hr { + border: none; + border-bottom: 1px solid #eee; + margin: 2em 0; +} +.markdown-section iframe { + border: 1px solid #eee; + width: 1px; + min-width: 100%; +} +.markdown-section table { + border-collapse: collapse; + border-spacing: 0; + display: block; + margin-bottom: 1rem; + overflow: auto; + width: 100%; +} +.markdown-section th { + font-weight: 700; +} +.markdown-section td, +.markdown-section th { + border: 1px solid #ddd; + padding: 6px 13px; +} +.markdown-section tr { + border-top: 1px solid #ccc; +} +.markdown-section p.tip, +.markdown-section tr:nth-child(2n) { + background-color: #f8f8f8; +} +.markdown-section p.tip { + border-bottom-right-radius: 2px; + border-left: 4px solid #f66; + border-top-right-radius: 2px; + margin: 2em 0; + padding: 12px 24px 12px 30px; + position: relative; +} +.markdown-section p.tip:before { + background-color: #f66; + border-radius: 100%; + color: #fff; + content: '!'; + font-family: Dosis, Source Sans Pro, Helvetica Neue, Arial, sans-serif; + font-size: 14px; + font-weight: 700; + left: -12px; + line-height: 20px; + position: absolute; + height: 20px; + width: 20px; + text-align: center; + top: 14px; +} +.markdown-section p.tip code { + background-color: #efefef; +} +.markdown-section p.tip em { + color: #34495e; +} +.markdown-section p.warn { + background: rgba(66, 185, 131, 0.1); + border-radius: 2px; + padding: 1rem; +} +.markdown-section ul.task-list > li { + list-style-type: none; +} +body.close .sidebar { + transform: translateX(-300px); +} +body.close .sidebar-toggle { + width: auto; +} +body.close .content { + left: 0; +} +@media print { + .app-nav, + .github-corner, + .sidebar, + .sidebar-toggle { + display: none; + } +} +@media screen and (max-width: 768px) { + .github-corner, + .sidebar, + .sidebar-toggle { + position: fixed; + } + .app-nav { + margin-top: 16px; + } + .app-nav li ul { + top: 30px; + } + main { + height: auto; + overflow-x: hidden; + } + .sidebar { + left: -300px; + transition: transform 0.25s ease-out; + } + .content { + left: 0; + max-width: 100vw; + position: static; + padding-top: 20px; + transition: transform 0.25s ease; + } + .app-nav, + .github-corner { + transition: transform 0.25s ease-out; + } + .sidebar-toggle { + background-color: transparent; + width: auto; + padding: 30px 30px 10px 10px; + } + body.close .sidebar { + transform: translateX(300px); + } + body.close .sidebar-toggle { + background-color: hsla(0, 0%, 100%, 0.8); + transition: background-color 1s; + width: 284px; + padding: 10px; + } + body.close .content { + transform: translateX(300px); + } + body.close .app-nav, + body.close .github-corner { + display: none; + } + .github-corner:hover .octo-arm { + -webkit-animation: none; + animation: none; + } + .github-corner .octo-arm { + -webkit-animation: octocat-wave 0.56s ease-in-out; + animation: octocat-wave 0.56s ease-in-out; + } +} +@-webkit-keyframes octocat-wave { + 0%, + to { + transform: rotate(0); + } + 20%, + 60% { + transform: rotate(-25deg); + } + 40%, + 80% { + transform: rotate(10deg); + } +} +@keyframes octocat-wave { + 0%, + to { + transform: rotate(0); + } + 20%, + 60% { + transform: rotate(-25deg); + } + 40%, + 80% { + transform: rotate(10deg); + } +} +section.cover { + align-items: center; + background-position: 50%; + background-repeat: no-repeat; + background-size: cover; + height: 100vh; + width: 100vw; + display: none; +} +section.cover.show { + display: flex; +} +section.cover.has-mask .mask { + background-color: #fff; + opacity: 0.8; + position: absolute; + top: 0; + height: 100%; + width: 100%; +} +section.cover .cover-main { + flex: 1; + margin: -20px 16px 0; + text-align: center; +} +section.cover a { + color: inherit; +} +section.cover a, +section.cover a:hover { + text-decoration: none; +} +section.cover p { + line-height: 1.5rem; + margin: 1em 0; +} +section.cover h1 { + color: inherit; + font-size: 2.5rem; + font-weight: 300; + margin: 0.625rem 0 2.5rem; + position: relative; + text-align: center; +} +section.cover h1 a { + display: block; +} +section.cover h1 small { + bottom: -0.4375rem; + font-size: 1rem; + position: absolute; +} +section.cover blockquote { + font-size: 1.5rem; + text-align: center; +} +section.cover ul { + line-height: 1.8; + list-style-type: none; + margin: 1em auto; + max-width: 500px; + padding: 0; +} +section.cover .cover-main > p:last-child a { + border-radius: 2rem; + border: 1px solid var(--theme-color, #42b983); + box-sizing: border-box; + color: var(--theme-color, #42b983); + display: inline-block; + font-size: 1.05rem; + letter-spacing: 0.1rem; + margin: 0.5rem 1rem; + padding: 0.75em 2rem; + text-decoration: none; + transition: all 0.15s ease; +} +section.cover .cover-main > p:last-child a:last-child { + background-color: var(--theme-color, #42b983); + color: #fff; +} +section.cover .cover-main > p:last-child a:last-child:hover { + color: inherit; + opacity: 0.8; +} +section.cover .cover-main > p:last-child a:hover { + color: inherit; +} +section.cover blockquote > p > a { + border-bottom: 2px solid var(--theme-color, #42b983); + transition: color 0.3s; +} +section.cover blockquote > p > a:hover { + color: var(--theme-color, #42b983); +} +.sidebar, +body { + background-color: #fff; +} +.sidebar { + color: #364149; +} +.sidebar li { + margin: 6px 0; +} +.sidebar ul li a { + color: #505d6b; + font-size: 14px; + font-weight: 400; + overflow: hidden; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; +} +.sidebar ul li a:hover { + text-decoration: underline; +} +.sidebar ul li ul { + padding: 0; +} +.sidebar ul li.active > a { + border-right: 2px solid; + color: var(--theme-color, #42b983); + font-weight: 600; +} +.app-sub-sidebar li:before { + content: '-'; + padding-right: 4px; + float: left; +} +.markdown-section h1, +.markdown-section h2, +.markdown-section h3, +.markdown-section h4, +.markdown-section strong { + color: #2c3e50; + font-weight: 600; +} +.markdown-section a { + color: var(--theme-color, #42b983); + font-weight: 600; +} +.markdown-section h1 { + font-size: 2rem; + margin: 0 0 1rem; +} +.markdown-section h2 { + font-size: 1.75rem; + margin: 45px 0 0.8rem; +} +.markdown-section h3 { + font-size: 1.5rem; + margin: 40px 0 0.6rem; +} +.markdown-section h4 { + font-size: 1.25rem; +} +.markdown-section h5 { + font-size: 1rem; +} +.markdown-section h6 { + color: #777; + font-size: 1rem; +} +.markdown-section figure, +.markdown-section p { + margin: 1.2em 0; +} +.markdown-section ol, +.markdown-section p, +.markdown-section ul { + line-height: 1.6rem; + word-spacing: 0.05rem; +} +.markdown-section ol, +.markdown-section ul { + padding-left: 1.5rem; +} +.markdown-section blockquote { + border-left: 4px solid var(--theme-color, #42b983); + color: #858585; + margin: 2em 0; + padding-left: 20px; +} +.markdown-section blockquote p { + font-weight: 600; + margin-left: 0; +} +.markdown-section iframe { + margin: 1em 0; +} +.markdown-section em { + color: #7f8c8d; +} +.markdown-section code { + border-radius: 2px; + color: #e96900; + font-size: 0.8rem; + margin: 0 2px; + padding: 3px 5px; + white-space: pre-wrap; +} +.markdown-section code, +.markdown-section pre { + background-color: #f8f8f8; + font-family: Roboto Mono, Monaco, courier, monospace; +} +.markdown-section pre { + -moz-osx-font-smoothing: initial; + -webkit-font-smoothing: initial; + line-height: 1.5rem; + margin: 1.2em 0; + overflow: auto; + padding: 0 1.4rem; + position: relative; + word-wrap: normal; +} +.token.cdata, +.token.comment, +.token.doctype, +.token.prolog { + color: #8e908c; +} +.token.namespace { + opacity: 0.7; +} +.token.boolean, +.token.number { + color: #c76b29; +} +.token.punctuation { + color: #525252; +} +.token.property { + color: #c08b30; +} +.token.tag { + color: #2973b7; +} +.token.string { + color: var(--theme-color, #42b983); +} +.token.selector { + color: #6679cc; +} +.token.attr-name { + color: #2973b7; +} +.language-css .token.string, +.style .token.string, +.token.entity, +.token.url { + color: #22a2c9; +} +.token.attr-value, +.token.control, +.token.directive, +.token.unit { + color: var(--theme-color, #42b983); +} +.token.function, +.token.keyword { + color: #e96900; +} +.token.atrule, +.token.regex, +.token.statement { + color: #22a2c9; +} +.token.placeholder, +.token.variable { + color: #3d8fd1; +} +.token.deleted { + text-decoration: line-through; +} +.token.inserted { + border-bottom: 1px dotted #202746; + text-decoration: none; +} +.token.italic { + font-style: italic; +} +.token.bold, +.token.important { + font-weight: 700; +} +.token.important { + color: #c94922; +} +.token.entity { + cursor: help; +} +.markdown-section pre > code { + -moz-osx-font-smoothing: initial; + -webkit-font-smoothing: initial; + background-color: #f8f8f8; + border-radius: 2px; + color: #525252; + display: block; + font-family: Roboto Mono, Monaco, courier, monospace; + font-size: 0.8rem; + line-height: inherit; + margin: 0 2px; + max-width: inherit; + overflow: inherit; + padding: 2.2em 5px; + white-space: inherit; +} +.markdown-section code:after, +.markdown-section code:before { + letter-spacing: 0.05rem; +} +code .token { + -moz-osx-font-smoothing: initial; + -webkit-font-smoothing: initial; + min-height: 1.5rem; + position: relative; + left: auto; +} +pre:after { + color: #ccc; + content: attr(data-lang); + font-size: 0.6rem; + font-weight: 600; + height: 15px; + line-height: 15px; + padding: 5px 10px 0; + position: absolute; + right: 0; + text-align: right; + top: 0; +} diff --git a/docs/theme_themed.css b/docs/theme_themed.css index cce96ad87..9cb520ed7 100644 --- a/docs/theme_themed.css +++ b/docs/theme_themed.css @@ -1,10 +1,1653 @@ -@import url("https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600");*{-webkit-font-smoothing:antialiased;-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:none;-webkit-touch-callout:none;box-sizing:border-box} +@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600'); +* { + -webkit-font-smoothing: antialiased; + -webkit-overflow-scrolling: touch; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-text-size-adjust: none; + -webkit-touch-callout: none; + box-sizing: border-box; +} @media (prefers-color-scheme: dark2) { - body:not(.ready){overflow:hidden}body:not(.ready) .app-nav,body:not(.ready)>nav,body:not(.ready) [data-cloak]{display:none}div#app{font-size:30px;font-weight:lighter;margin:40vh auto;text-align:center}div#app:empty:before{content:"Loading..."}.emoji{height:1.2rem;vertical-align:middle}.progress{background-color:var(--theme-color,#ea6f5a);height:2px;left:0;position:fixed;right:0;top:0;transition:width .2s,opacity .4s;width:0;z-index:999999}.search .search-keyword,.search a:hover{color:var(--theme-color,#ea6f5a)}.search .search-keyword{font-style:normal;font-weight:700}body,html{height:100%}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:#c8c8c8;font-family:Source Sans Pro,Helvetica Neue,Arial,sans-serif;font-size:15px;letter-spacing:0;margin:0;overflow-x:hidden}img{max-width:100%}a[disabled]{cursor:not-allowed;opacity:.6}kbd{border:1px solid #ccc;border-radius:3px;display:inline-block;font-size:12px!important;line-height:12px;margin-bottom:3px;padding:3px 5px;vertical-align:middle}li input[type=checkbox]{margin:0 .2em .25em 0;vertical-align:middle}.app-nav{margin:25px 60px 0 0;position:absolute;right:0;text-align:right;z-index:10}.app-nav.no-badge{margin-right:25px}.app-nav p{margin:0}.app-nav>a{margin:0 1rem;padding:5px 0}.app-nav li,.app-nav ul{display:inline-block;list-style:none;margin:0}.app-nav a{color:inherit;font-size:16px;text-decoration:none;transition:color .3s}.app-nav a.active,.app-nav a:hover{color:var(--theme-color,#ea6f5a)}.app-nav a.active{border-bottom:2px solid var(--theme-color,#ea6f5a)}.app-nav li{display:inline-block;margin:0 1rem;padding:5px 0;position:relative;cursor:pointer}.app-nav li ul{background-color:#fff;border:1px solid;border-color:#ddd #ddd #ccc;border-radius:4px;box-sizing:border-box;display:none;max-height:calc(100vh - 61px);overflow-y:auto;padding:10px 0;position:absolute;right:-15px;text-align:left;top:100%;white-space:nowrap}.app-nav li ul li{display:block;font-size:14px;line-height:1rem;margin:8px 14px;white-space:nowrap}.app-nav li ul a{display:block;font-size:inherit;margin:0;padding:0}.app-nav li ul a.active{border-bottom:0}.app-nav li:hover ul{display:block}.github-corner{border-bottom:0;position:fixed;right:0;text-decoration:none;top:0;z-index:1}.github-corner:hover .octo-arm{-webkit-animation:octocat-wave .56s ease-in-out;animation:octocat-wave .56s ease-in-out}.github-corner svg{color:#3f3f3f;fill:var(--theme-color,#ea6f5a);height:80px;width:80px}main{display:block;position:relative;width:100vw;height:100%;z-index:0}main.hidden{display:none}.anchor{display:inline-block;text-decoration:none;transition:all .3s}.anchor span{color:#c8c8c8}.anchor:hover{text-decoration:underline}.sidebar{border-right:1px solid rgba(0,0,0,.07);overflow-y:auto;padding:40px 0 0;position:absolute;top:0;bottom:0;left:0;transition:transform .25s ease-out;width:300px;z-index:20}.sidebar>h1{margin:0 auto 1rem;font-size:1.5rem;font-weight:300;text-align:center}.sidebar>h1 a{color:inherit;text-decoration:none}.sidebar>h1 .app-nav{display:block;position:static}.sidebar .sidebar-nav{line-height:2em;padding-bottom:40px}.sidebar li.collapse .app-sub-sidebar{display:none}.sidebar ul{margin:0 0 0 15px;padding:0}.sidebar li>p{font-weight:700;margin:0}.sidebar ul,.sidebar ul li{list-style:none}.sidebar ul li a{border-bottom:none;display:block}.sidebar ul li ul{padding-left:20px}.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-thumb{background:transparent;border-radius:4px}.sidebar:hover::-webkit-scrollbar-thumb{background:hsla(0,0%,53.3%,.4)}.sidebar:hover::-webkit-scrollbar-track{background:hsla(0,0%,53.3%,.1)}.sidebar-toggle{background-color:transparent;background-color:rgba(63,63,63,.8);border:0;outline:none;padding:10px;position:absolute;bottom:0;left:0;text-align:center;transition:opacity .3s;width:284px;z-index:30;cursor:pointer}.sidebar-toggle:hover .sidebar-toggle-button{opacity:.4}.sidebar-toggle span{background-color:var(--theme-color,#ea6f5a);display:block;margin-bottom:4px;width:16px;height:2px}body.sticky .sidebar,body.sticky .sidebar-toggle{position:fixed}.content{padding-top:60px;position:absolute;top:0;right:0;bottom:0;left:300px;transition:left .25s ease}.markdown-section{margin:0 auto;max-width:80%;padding:30px 15px 40px;position:relative}.markdown-section>*{box-sizing:border-box;font-size:inherit}.markdown-section>:first-child{margin-top:0!important}.markdown-section hr{border:none;border-bottom:1px solid #eee;margin:2em 0}.markdown-section iframe{border:1px solid #eee;width:1px;min-width:100%}.markdown-section table{border-collapse:collapse;border-spacing:0;display:block;margin-bottom:1rem;overflow:auto;width:100%}.markdown-section th{font-weight:700}.markdown-section td,.markdown-section th{border:1px solid #ddd;padding:6px 13px}.markdown-section tr{border-top:1px solid #ccc}.markdown-section p.tip,.markdown-section tr:nth-child(2n){background-color:#f8f8f8}.markdown-section p.tip{border-bottom-right-radius:2px;border-left:4px solid #f66;border-top-right-radius:2px;margin:2em 0;padding:12px 24px 12px 30px;position:relative}.markdown-section p.tip:before{background-color:#f66;border-radius:100%;color:#3f3f3f;content:"!";font-family:Dosis,Source Sans Pro,Helvetica Neue,Arial,sans-serif;font-size:14px;font-weight:700;left:-12px;line-height:20px;position:absolute;height:20px;width:20px;text-align:center;top:14px}.markdown-section p.tip code{background-color:#efefef}.markdown-section p.tip em{color:#c8c8c8}.markdown-section p.warn{background:rgba(234,111,90,.1);border-radius:2px;padding:1rem}.markdown-section ul.task-list>li{list-style-type:none}body.close .sidebar{transform:translateX(-300px)}body.close .sidebar-toggle{width:auto}body.close .content{left:0}@media print{.app-nav,.github-corner,.sidebar,.sidebar-toggle{display:none}}@media screen and (max-width:768px){.github-corner,.sidebar,.sidebar-toggle{position:fixed}.app-nav{margin-top:16px}.app-nav li ul{top:30px}main{height:auto;overflow-x:hidden}.sidebar{left:-300px;transition:transform .25s ease-out}.content{left:0;max-width:100vw;position:static;padding-top:20px;transition:transform .25s ease}.app-nav,.github-corner{transition:transform .25s ease-out}.sidebar-toggle{background-color:transparent;width:auto;padding:30px 30px 10px 10px}body.close .sidebar{transform:translateX(300px)}body.close .sidebar-toggle{background-color:rgba(63,63,63,.8);transition:background-color 1s;width:284px;padding:10px}body.close .content{transform:translateX(300px)}body.close .app-nav,body.close .github-corner{display:none}.github-corner:hover .octo-arm{-webkit-animation:none;animation:none}.github-corner .octo-arm{-webkit-animation:octocat-wave .56s ease-in-out;animation:octocat-wave .56s ease-in-out}}@-webkit-keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}section.cover{align-items:center;background-position:50%;background-repeat:no-repeat;background-size:cover;height:100vh;width:100vw;display:none}section.cover.show{display:flex}section.cover.has-mask .mask{background-color:#3f3f3f;opacity:.8;position:absolute;top:0;height:100%;width:100%}section.cover .cover-main{flex:1;margin:-20px 16px 0;text-align:center}section.cover a{color:inherit}section.cover a,section.cover a:hover{text-decoration:none}section.cover p{line-height:1.5rem;margin:1em 0}section.cover h1{color:inherit;font-size:2.5rem;font-weight:300;margin:.625rem 0 2.5rem;position:relative;text-align:center}section.cover h1 a{display:block}section.cover h1 small{bottom:-.4375rem;font-size:1rem;position:absolute}section.cover blockquote{font-size:1.5rem;text-align:center}section.cover ul{line-height:1.8;list-style-type:none;margin:1em auto;max-width:500px;padding:0}section.cover .cover-main>p:last-child a{border-radius:2rem;border:1px solid var(--theme-color,#ea6f5a);box-sizing:border-box;color:var(--theme-color,#ea6f5a);display:inline-block;font-size:1.05rem;letter-spacing:.1rem;margin:.5rem 1rem;padding:.75em 2rem;text-decoration:none;transition:all .15s ease}section.cover .cover-main>p:last-child a:last-child{background-color:var(--theme-color,#ea6f5a);color:#fff}section.cover .cover-main>p:last-child a:last-child:hover{color:inherit;opacity:.8}section.cover .cover-main>p:last-child a:hover{color:inherit}section.cover blockquote>p>a{border-bottom:2px solid var(--theme-color,#ea6f5a);transition:color .3s}section.cover blockquote>p>a:hover{color:var(--theme-color,#ea6f5a)}.sidebar,body{background-color:#3f3f3f}.sidebar{color:#c8c8c8}.sidebar li{margin:6px 15px 6px 0}.sidebar ul li a{color:#c8c8c8;font-size:14px;overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.sidebar ul li a:hover{text-decoration:underline}.sidebar ul li ul{padding:0}.sidebar ul li.active>a{color:var(--theme-color,#ea6f5a);font-weight:600}.markdown-section h1,.markdown-section h2,.markdown-section h3,.markdown-section h4,.markdown-section strong{color:#657b83;font-weight:600}.markdown-section a{color:var(--theme-color,#ea6f5a);font-weight:600}.markdown-section h1{font-size:2rem;margin:0 0 1rem}.markdown-section h2{font-size:1.75rem;margin:45px 0 .8rem}.markdown-section h3{font-size:1.5rem;margin:40px 0 .6rem}.markdown-section h4{font-size:1.25rem}.markdown-section h5{font-size:1rem}.markdown-section h6{color:#777;font-size:1rem}.markdown-section figure,.markdown-section ol,.markdown-section p,.markdown-section ul{margin:1.2em 0}.markdown-section ol,.markdown-section p,.markdown-section ul{line-height:1.6rem;word-spacing:.05rem}.markdown-section ol,.markdown-section ul{padding-left:1.5rem}.markdown-section blockquote{border-left:4px solid var(--theme-color,#ea6f5a);color:#858585;margin:2em 0;padding-left:20px}.markdown-section blockquote p{font-weight:600;margin-left:0}.markdown-section iframe{margin:1em 0}.markdown-section em{color:#7f8c8d}.markdown-section code{border-radius:2px;color:#657b83;font-size:.8rem;margin:0 2px;padding:3px 5px;white-space:pre-wrap}.markdown-section code,.markdown-section pre{background-color:#282828;font-family:Roboto Mono,Monaco,courier,monospace}.markdown-section pre{-moz-osx-font-smoothing:initial;-webkit-font-smoothing:initial;line-height:1.5rem;margin:1.2em 0;overflow:auto;padding:0 1.4rem;position:relative;word-wrap:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8e908c}.token.namespace{opacity:.7}.token.boolean,.token.number{color:#c76b29}.token.punctuation{color:#525252}.token.property{color:#c08b30}.token.tag{color:#2973b7}.token.string{color:var(--theme-color,#ea6f5a)}.token.selector{color:#6679cc}.token.attr-name{color:#2973b7}.language-css .token.string,.style .token.string,.token.entity,.token.url{color:#22a2c9}.token.attr-value,.token.control,.token.directive,.token.unit{color:var(--theme-color,#ea6f5a)}.token.keyword{color:#e96900}.token.atrule,.token.regex,.token.statement{color:#22a2c9}.token.placeholder,.token.variable{color:#3d8fd1}.token.deleted{text-decoration:line-through}.token.inserted{border-bottom:1px dotted #202746;text-decoration:none}.token.italic{font-style:italic}.token.bold,.token.important{font-weight:700}.token.important{color:#c94922}.token.entity{cursor:help}.markdown-section pre>code{-moz-osx-font-smoothing:initial;-webkit-font-smoothing:initial;background-color:#282828;border-radius:2px;color:#657b83;display:block;font-family:Roboto Mono,Monaco,courier,monospace;font-size:.8rem;line-height:inherit;margin:0 2px;max-width:inherit;overflow:inherit;padding:2.2em 5px;white-space:inherit}.markdown-section code:after,.markdown-section code:before{letter-spacing:.05rem}code .token{-moz-osx-font-smoothing:initial;-webkit-font-smoothing:initial;min-height:1.5rem;position:relative;left:auto}pre:after{color:#ccc;content:attr(data-lang);font-size:.6rem;font-weight:600;height:15px;line-height:15px;padding:5px 10px 0;position:absolute;right:0;text-align:right;top:0}.markdown-section p.tip{background-color:#282828;color:#657b83}input[type=search]{background:#4f4f4f;border-color:#4f4f4f;color:#c8c8c8} + body:not(.ready) { + overflow: hidden; + } + body:not(.ready) .app-nav, + body:not(.ready) > nav, + body:not(.ready) [data-cloak] { + display: none; + } + div#app { + font-size: 30px; + font-weight: lighter; + margin: 40vh auto; + text-align: center; + } + div#app:empty:before { + content: 'Loading...'; + } + .emoji { + height: 1.2rem; + vertical-align: middle; + } + .progress { + background-color: var(--theme-color, #ea6f5a); + height: 2px; + left: 0; + position: fixed; + right: 0; + top: 0; + transition: width 0.2s, opacity 0.4s; + width: 0; + z-index: 999999; + } + .search .search-keyword, + .search a:hover { + color: var(--theme-color, #ea6f5a); + } + .search .search-keyword { + font-style: normal; + font-weight: 700; + } + body, + html { + height: 100%; + } + body { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + color: #c8c8c8; + font-family: Source Sans Pro, Helvetica Neue, Arial, sans-serif; + font-size: 15px; + letter-spacing: 0; + margin: 0; + overflow-x: hidden; + } + img { + max-width: 100%; + } + a[disabled] { + cursor: not-allowed; + opacity: 0.6; + } + kbd { + border: 1px solid #ccc; + border-radius: 3px; + display: inline-block; + font-size: 12px !important; + line-height: 12px; + margin-bottom: 3px; + padding: 3px 5px; + vertical-align: middle; + } + li input[type='checkbox'] { + margin: 0 0.2em 0.25em 0; + vertical-align: middle; + } + .app-nav { + margin: 25px 60px 0 0; + position: absolute; + right: 0; + text-align: right; + z-index: 10; + } + .app-nav.no-badge { + margin-right: 25px; + } + .app-nav p { + margin: 0; + } + .app-nav > a { + margin: 0 1rem; + padding: 5px 0; + } + .app-nav li, + .app-nav ul { + display: inline-block; + list-style: none; + margin: 0; + } + .app-nav a { + color: inherit; + font-size: 16px; + text-decoration: none; + transition: color 0.3s; + } + .app-nav a.active, + .app-nav a:hover { + color: var(--theme-color, #ea6f5a); + } + .app-nav a.active { + border-bottom: 2px solid var(--theme-color, #ea6f5a); + } + .app-nav li { + display: inline-block; + margin: 0 1rem; + padding: 5px 0; + position: relative; + cursor: pointer; + } + .app-nav li ul { + background-color: #fff; + border: 1px solid; + border-color: #ddd #ddd #ccc; + border-radius: 4px; + box-sizing: border-box; + display: none; + max-height: calc(100vh - 61px); + overflow-y: auto; + padding: 10px 0; + position: absolute; + right: -15px; + text-align: left; + top: 100%; + white-space: nowrap; + } + .app-nav li ul li { + display: block; + font-size: 14px; + line-height: 1rem; + margin: 8px 14px; + white-space: nowrap; + } + .app-nav li ul a { + display: block; + font-size: inherit; + margin: 0; + padding: 0; + } + .app-nav li ul a.active { + border-bottom: 0; + } + .app-nav li:hover ul { + display: block; + } + .github-corner { + border-bottom: 0; + position: fixed; + right: 0; + text-decoration: none; + top: 0; + z-index: 1; + } + .github-corner:hover .octo-arm { + -webkit-animation: octocat-wave 0.56s ease-in-out; + animation: octocat-wave 0.56s ease-in-out; + } + .github-corner svg { + color: #3f3f3f; + fill: var(--theme-color, #ea6f5a); + height: 80px; + width: 80px; + } + main { + display: block; + position: relative; + width: 100vw; + height: 100%; + z-index: 0; + } + main.hidden { + display: none; + } + .anchor { + display: inline-block; + text-decoration: none; + transition: all 0.3s; + } + .anchor span { + color: #c8c8c8; + } + .anchor:hover { + text-decoration: underline; + } + .sidebar { + border-right: 1px solid rgba(0, 0, 0, 0.07); + overflow-y: auto; + padding: 40px 0 0; + position: absolute; + top: 0; + bottom: 0; + left: 0; + transition: transform 0.25s ease-out; + width: 300px; + z-index: 20; + } + .sidebar > h1 { + margin: 0 auto 1rem; + font-size: 1.5rem; + font-weight: 300; + text-align: center; + } + .sidebar > h1 a { + color: inherit; + text-decoration: none; + } + .sidebar > h1 .app-nav { + display: block; + position: static; + } + .sidebar .sidebar-nav { + line-height: 2em; + padding-bottom: 40px; + } + .sidebar li.collapse .app-sub-sidebar { + display: none; + } + .sidebar ul { + margin: 0 0 0 15px; + padding: 0; + } + .sidebar li > p { + font-weight: 700; + margin: 0; + } + .sidebar ul, + .sidebar ul li { + list-style: none; + } + .sidebar ul li a { + border-bottom: none; + display: block; + } + .sidebar ul li ul { + padding-left: 20px; + } + .sidebar::-webkit-scrollbar { + width: 4px; + } + .sidebar::-webkit-scrollbar-thumb { + background: transparent; + border-radius: 4px; + } + .sidebar:hover::-webkit-scrollbar-thumb { + background: hsla(0, 0%, 53.3%, 0.4); + } + .sidebar:hover::-webkit-scrollbar-track { + background: hsla(0, 0%, 53.3%, 0.1); + } + .sidebar-toggle { + background-color: transparent; + background-color: rgba(63, 63, 63, 0.8); + border: 0; + outline: none; + padding: 10px; + position: absolute; + bottom: 0; + left: 0; + text-align: center; + transition: opacity 0.3s; + width: 284px; + z-index: 30; + cursor: pointer; + } + .sidebar-toggle:hover .sidebar-toggle-button { + opacity: 0.4; + } + .sidebar-toggle span { + background-color: var(--theme-color, #ea6f5a); + display: block; + margin-bottom: 4px; + width: 16px; + height: 2px; + } + body.sticky .sidebar, + body.sticky .sidebar-toggle { + position: fixed; + } + .content { + padding-top: 60px; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 300px; + transition: left 0.25s ease; + } + .markdown-section { + margin: 0 auto; + max-width: 80%; + padding: 30px 15px 40px; + position: relative; + } + .markdown-section > * { + box-sizing: border-box; + font-size: inherit; + } + .markdown-section > :first-child { + margin-top: 0 !important; + } + .markdown-section hr { + border: none; + border-bottom: 1px solid #eee; + margin: 2em 0; + } + .markdown-section iframe { + border: 1px solid #eee; + width: 1px; + min-width: 100%; + } + .markdown-section table { + border-collapse: collapse; + border-spacing: 0; + display: block; + margin-bottom: 1rem; + overflow: auto; + width: 100%; + } + .markdown-section th { + font-weight: 700; + } + .markdown-section td, + .markdown-section th { + border: 1px solid #ddd; + padding: 6px 13px; + } + .markdown-section tr { + border-top: 1px solid #ccc; + } + .markdown-section p.tip, + .markdown-section tr:nth-child(2n) { + background-color: #f8f8f8; + } + .markdown-section p.tip { + border-bottom-right-radius: 2px; + border-left: 4px solid #f66; + border-top-right-radius: 2px; + margin: 2em 0; + padding: 12px 24px 12px 30px; + position: relative; + } + .markdown-section p.tip:before { + background-color: #f66; + border-radius: 100%; + color: #3f3f3f; + content: '!'; + font-family: Dosis, Source Sans Pro, Helvetica Neue, Arial, sans-serif; + font-size: 14px; + font-weight: 700; + left: -12px; + line-height: 20px; + position: absolute; + height: 20px; + width: 20px; + text-align: center; + top: 14px; + } + .markdown-section p.tip code { + background-color: #efefef; + } + .markdown-section p.tip em { + color: #c8c8c8; + } + .markdown-section p.warn { + background: rgba(234, 111, 90, 0.1); + border-radius: 2px; + padding: 1rem; + } + .markdown-section ul.task-list > li { + list-style-type: none; + } + body.close .sidebar { + transform: translateX(-300px); + } + body.close .sidebar-toggle { + width: auto; + } + body.close .content { + left: 0; + } + @media print { + .app-nav, + .github-corner, + .sidebar, + .sidebar-toggle { + display: none; + } + } + @media screen and (max-width: 768px) { + .github-corner, + .sidebar, + .sidebar-toggle { + position: fixed; + } + .app-nav { + margin-top: 16px; + } + .app-nav li ul { + top: 30px; + } + main { + height: auto; + overflow-x: hidden; + } + .sidebar { + left: -300px; + transition: transform 0.25s ease-out; + } + .content { + left: 0; + max-width: 100vw; + position: static; + padding-top: 20px; + transition: transform 0.25s ease; + } + .app-nav, + .github-corner { + transition: transform 0.25s ease-out; + } + .sidebar-toggle { + background-color: transparent; + width: auto; + padding: 30px 30px 10px 10px; + } + body.close .sidebar { + transform: translateX(300px); + } + body.close .sidebar-toggle { + background-color: rgba(63, 63, 63, 0.8); + transition: background-color 1s; + width: 284px; + padding: 10px; + } + body.close .content { + transform: translateX(300px); + } + body.close .app-nav, + body.close .github-corner { + display: none; + } + .github-corner:hover .octo-arm { + -webkit-animation: none; + animation: none; + } + .github-corner .octo-arm { + -webkit-animation: octocat-wave 0.56s ease-in-out; + animation: octocat-wave 0.56s ease-in-out; + } + } + @-webkit-keyframes octocat-wave { + 0%, + to { + transform: rotate(0); + } + 20%, + 60% { + transform: rotate(-25deg); + } + 40%, + 80% { + transform: rotate(10deg); + } + } + @keyframes octocat-wave { + 0%, + to { + transform: rotate(0); + } + 20%, + 60% { + transform: rotate(-25deg); + } + 40%, + 80% { + transform: rotate(10deg); + } + } + section.cover { + align-items: center; + background-position: 50%; + background-repeat: no-repeat; + background-size: cover; + height: 100vh; + width: 100vw; + display: none; + } + section.cover.show { + display: flex; + } + section.cover.has-mask .mask { + background-color: #3f3f3f; + opacity: 0.8; + position: absolute; + top: 0; + height: 100%; + width: 100%; + } + section.cover .cover-main { + flex: 1; + margin: -20px 16px 0; + text-align: center; + } + section.cover a { + color: inherit; + } + section.cover a, + section.cover a:hover { + text-decoration: none; + } + section.cover p { + line-height: 1.5rem; + margin: 1em 0; + } + section.cover h1 { + color: inherit; + font-size: 2.5rem; + font-weight: 300; + margin: 0.625rem 0 2.5rem; + position: relative; + text-align: center; + } + section.cover h1 a { + display: block; + } + section.cover h1 small { + bottom: -0.4375rem; + font-size: 1rem; + position: absolute; + } + section.cover blockquote { + font-size: 1.5rem; + text-align: center; + } + section.cover ul { + line-height: 1.8; + list-style-type: none; + margin: 1em auto; + max-width: 500px; + padding: 0; + } + section.cover .cover-main > p:last-child a { + border-radius: 2rem; + border: 1px solid var(--theme-color, #ea6f5a); + box-sizing: border-box; + color: var(--theme-color, #ea6f5a); + display: inline-block; + font-size: 1.05rem; + letter-spacing: 0.1rem; + margin: 0.5rem 1rem; + padding: 0.75em 2rem; + text-decoration: none; + transition: all 0.15s ease; + } + section.cover .cover-main > p:last-child a:last-child { + background-color: var(--theme-color, #ea6f5a); + color: #fff; + } + section.cover .cover-main > p:last-child a:last-child:hover { + color: inherit; + opacity: 0.8; + } + section.cover .cover-main > p:last-child a:hover { + color: inherit; + } + section.cover blockquote > p > a { + border-bottom: 2px solid var(--theme-color, #ea6f5a); + transition: color 0.3s; + } + section.cover blockquote > p > a:hover { + color: var(--theme-color, #ea6f5a); + } + .sidebar, + body { + background-color: #3f3f3f; + } + .sidebar { + color: #c8c8c8; + } + .sidebar li { + margin: 6px 15px 6px 0; + } + .sidebar ul li a { + color: #c8c8c8; + font-size: 14px; + overflow: hidden; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + } + .sidebar ul li a:hover { + text-decoration: underline; + } + .sidebar ul li ul { + padding: 0; + } + .sidebar ul li.active > a { + color: var(--theme-color, #ea6f5a); + font-weight: 600; + } + .markdown-section h1, + .markdown-section h2, + .markdown-section h3, + .markdown-section h4, + .markdown-section strong { + color: #657b83; + font-weight: 600; + } + .markdown-section a { + color: var(--theme-color, #ea6f5a); + font-weight: 600; + } + .markdown-section h1 { + font-size: 2rem; + margin: 0 0 1rem; + } + .markdown-section h2 { + font-size: 1.75rem; + margin: 45px 0 0.8rem; + } + .markdown-section h3 { + font-size: 1.5rem; + margin: 40px 0 0.6rem; + } + .markdown-section h4 { + font-size: 1.25rem; + } + .markdown-section h5 { + font-size: 1rem; + } + .markdown-section h6 { + color: #777; + font-size: 1rem; + } + .markdown-section figure, + .markdown-section ol, + .markdown-section p, + .markdown-section ul { + margin: 1.2em 0; + } + .markdown-section ol, + .markdown-section p, + .markdown-section ul { + line-height: 1.6rem; + word-spacing: 0.05rem; + } + .markdown-section ol, + .markdown-section ul { + padding-left: 1.5rem; + } + .markdown-section blockquote { + border-left: 4px solid var(--theme-color, #ea6f5a); + color: #858585; + margin: 2em 0; + padding-left: 20px; + } + .markdown-section blockquote p { + font-weight: 600; + margin-left: 0; + } + .markdown-section iframe { + margin: 1em 0; + } + .markdown-section em { + color: #7f8c8d; + } + .markdown-section code { + border-radius: 2px; + color: #657b83; + font-size: 0.8rem; + margin: 0 2px; + padding: 3px 5px; + white-space: pre-wrap; + } + .markdown-section code, + .markdown-section pre { + background-color: #282828; + font-family: Roboto Mono, Monaco, courier, monospace; + } + .markdown-section pre { + -moz-osx-font-smoothing: initial; + -webkit-font-smoothing: initial; + line-height: 1.5rem; + margin: 1.2em 0; + overflow: auto; + padding: 0 1.4rem; + position: relative; + word-wrap: normal; + } + .token.cdata, + .token.comment, + .token.doctype, + .token.prolog { + color: #8e908c; + } + .token.namespace { + opacity: 0.7; + } + .token.boolean, + .token.number { + color: #c76b29; + } + .token.punctuation { + color: #525252; + } + .token.property { + color: #c08b30; + } + .token.tag { + color: #2973b7; + } + .token.string { + color: var(--theme-color, #ea6f5a); + } + .token.selector { + color: #6679cc; + } + .token.attr-name { + color: #2973b7; + } + .language-css .token.string, + .style .token.string, + .token.entity, + .token.url { + color: #22a2c9; + } + .token.attr-value, + .token.control, + .token.directive, + .token.unit { + color: var(--theme-color, #ea6f5a); + } + .token.keyword { + color: #e96900; + } + .token.atrule, + .token.regex, + .token.statement { + color: #22a2c9; + } + .token.placeholder, + .token.variable { + color: #3d8fd1; + } + .token.deleted { + text-decoration: line-through; + } + .token.inserted { + border-bottom: 1px dotted #202746; + text-decoration: none; + } + .token.italic { + font-style: italic; + } + .token.bold, + .token.important { + font-weight: 700; + } + .token.important { + color: #c94922; + } + .token.entity { + cursor: help; + } + .markdown-section pre > code { + -moz-osx-font-smoothing: initial; + -webkit-font-smoothing: initial; + background-color: #282828; + border-radius: 2px; + color: #657b83; + display: block; + font-family: Roboto Mono, Monaco, courier, monospace; + font-size: 0.8rem; + line-height: inherit; + margin: 0 2px; + max-width: inherit; + overflow: inherit; + padding: 2.2em 5px; + white-space: inherit; + } + .markdown-section code:after, + .markdown-section code:before { + letter-spacing: 0.05rem; + } + code .token { + -moz-osx-font-smoothing: initial; + -webkit-font-smoothing: initial; + min-height: 1.5rem; + position: relative; + left: auto; + } + pre:after { + color: #ccc; + content: attr(data-lang); + font-size: 0.6rem; + font-weight: 600; + height: 15px; + line-height: 15px; + padding: 5px 10px 0; + position: absolute; + right: 0; + text-align: right; + top: 0; + } + .markdown-section p.tip { + background-color: #282828; + color: #657b83; + } + input[type='search'] { + background: #4f4f4f; + border-color: #4f4f4f; + color: #c8c8c8; + } } @media (prefers-color-scheme: light or prefers-color-scheme: dark) { -/* @media (screen) { */ -body:not(.ready){overflow:hidden}body:not(.ready) .app-nav,body:not(.ready)>nav,body:not(.ready) [data-cloak]{display:none}div#app{font-size:30px;font-weight:lighter;margin:40vh auto;text-align:center}div#app:empty:before{content:"Loading..."}.emoji{height:1.2rem;vertical-align:middle}.progress{background-color:var(--theme-color,#42b983);height:2px;left:0;position:fixed;right:0;top:0;transition:width .2s,opacity .4s;width:0;z-index:999999}.search .search-keyword,.search a:hover{color:var(--theme-color,#42b983)}.search .search-keyword{font-style:normal;font-weight:700}body,html{height:100%}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:#34495e;font-family:Source Sans Pro,Helvetica Neue,Arial,sans-serif;font-size:15px;letter-spacing:0;margin:0;overflow-x:hidden}img{max-width:100%}a[disabled]{cursor:not-allowed;opacity:.6}kbd{border:1px solid #ccc;border-radius:3px;display:inline-block;font-size:12px!important;line-height:12px;margin-bottom:3px;padding:3px 5px;vertical-align:middle}li input[type=checkbox]{margin:0 .2em .25em 0;vertical-align:middle}.app-nav{margin:25px 60px 0 0;position:absolute;right:0;text-align:right;z-index:10}.app-nav.no-badge{margin-right:25px}.app-nav p{margin:0}.app-nav>a{margin:0 1rem;padding:5px 0}.app-nav li,.app-nav ul{display:inline-block;list-style:none;margin:0}.app-nav a{color:inherit;font-size:16px;text-decoration:none;transition:color .3s}.app-nav a.active,.app-nav a:hover{color:var(--theme-color,#42b983)}.app-nav a.active{border-bottom:2px solid var(--theme-color,#42b983)}.app-nav li{display:inline-block;margin:0 1rem;padding:5px 0;position:relative;cursor:pointer}.app-nav li ul{background-color:#fff;border:1px solid;border-color:#ddd #ddd #ccc;border-radius:4px;box-sizing:border-box;display:none;max-height:calc(100vh - 61px);overflow-y:auto;padding:10px 0;position:absolute;right:-15px;text-align:left;top:100%;white-space:nowrap}.app-nav li ul li{display:block;font-size:14px;line-height:1rem;margin:8px 14px;white-space:nowrap}.app-nav li ul a{display:block;font-size:inherit;margin:0;padding:0}.app-nav li ul a.active{border-bottom:0}.app-nav li:hover ul{display:block}.github-corner{border-bottom:0;position:fixed;right:0;text-decoration:none;top:0;z-index:1}.github-corner:hover .octo-arm{-webkit-animation:octocat-wave .56s ease-in-out;animation:octocat-wave .56s ease-in-out}.github-corner svg{color:#fff;fill:var(--theme-color,#42b983);height:80px;width:80px}main{display:block;position:relative;width:100vw;height:100%;z-index:0}main.hidden{display:none}.anchor{display:inline-block;text-decoration:none;transition:all .3s}.anchor span{color:#34495e}.anchor:hover{text-decoration:underline}.sidebar{border-right:1px solid rgba(0,0,0,.07);overflow-y:auto;padding:40px 0 0;position:absolute;top:0;bottom:0;left:0;transition:transform .25s ease-out;width:300px;z-index:20}.sidebar>h1{margin:0 auto 1rem;font-size:1.5rem;font-weight:300;text-align:center}.sidebar>h1 a{color:inherit;text-decoration:none}.sidebar>h1 .app-nav{display:block;position:static}.sidebar .sidebar-nav{line-height:2em;padding-bottom:40px}.sidebar li.collapse .app-sub-sidebar{display:none}.sidebar ul{margin:0 0 0 15px;padding:0}.sidebar li>p{font-weight:700;margin:0}.sidebar ul,.sidebar ul li{list-style:none}.sidebar ul li a{border-bottom:none;display:block}.sidebar ul li ul{padding-left:20px}.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-thumb{background:transparent;border-radius:4px}.sidebar:hover::-webkit-scrollbar-thumb{background:hsla(0,0%,53.3%,.4)}.sidebar:hover::-webkit-scrollbar-track{background:hsla(0,0%,53.3%,.1)}.sidebar-toggle{background-color:transparent;background-color:hsla(0,0%,100%,.8);border:0;outline:none;padding:10px;position:absolute;bottom:0;left:0;text-align:center;transition:opacity .3s;width:284px;z-index:30;cursor:pointer}.sidebar-toggle:hover .sidebar-toggle-button{opacity:.4}.sidebar-toggle span{background-color:var(--theme-color,#42b983);display:block;margin-bottom:4px;width:16px;height:2px}body.sticky .sidebar,body.sticky .sidebar-toggle{position:fixed}.content{padding-top:60px;position:absolute;top:0;right:0;bottom:0;left:300px;transition:left .25s ease}.markdown-section{margin:0 auto;max-width:80%;padding:30px 15px 40px;position:relative}.markdown-section>*{box-sizing:border-box;font-size:inherit}.markdown-section>:first-child{margin-top:0!important}.markdown-section hr{border:none;border-bottom:1px solid #eee;margin:2em 0}.markdown-section iframe{border:1px solid #eee;width:1px;min-width:100%}.markdown-section table{border-collapse:collapse;border-spacing:0;display:block;margin-bottom:1rem;overflow:auto;width:100%}.markdown-section th{font-weight:700}.markdown-section td,.markdown-section th{border:1px solid #ddd;padding:6px 13px}.markdown-section tr{border-top:1px solid #ccc}.markdown-section p.tip,.markdown-section tr:nth-child(2n){background-color:#f8f8f8}.markdown-section p.tip{border-bottom-right-radius:2px;border-left:4px solid #f66;border-top-right-radius:2px;margin:2em 0;padding:12px 24px 12px 30px;position:relative}.markdown-section p.tip:before{background-color:#f66;border-radius:100%;color:#fff;content:"!";font-family:Dosis,Source Sans Pro,Helvetica Neue,Arial,sans-serif;font-size:14px;font-weight:700;left:-12px;line-height:20px;position:absolute;height:20px;width:20px;text-align:center;top:14px}.markdown-section p.tip code{background-color:#efefef}.markdown-section p.tip em{color:#34495e}.markdown-section p.warn{background:rgba(66,185,131,.1);border-radius:2px;padding:1rem}.markdown-section ul.task-list>li{list-style-type:none}body.close .sidebar{transform:translateX(-300px)}body.close .sidebar-toggle{width:auto}body.close .content{left:0}@media print{.app-nav,.github-corner,.sidebar,.sidebar-toggle{display:none}}@media screen and (max-width:768px){.github-corner,.sidebar,.sidebar-toggle{position:fixed}.app-nav{margin-top:16px}.app-nav li ul{top:30px}main{height:auto;overflow-x:hidden}.sidebar{left:-300px;transition:transform .25s ease-out}.content{left:0;max-width:100vw;position:static;padding-top:20px;transition:transform .25s ease}.app-nav,.github-corner{transition:transform .25s ease-out}.sidebar-toggle{background-color:transparent;width:auto;padding:30px 30px 10px 10px}body.close .sidebar{transform:translateX(300px)}body.close .sidebar-toggle{background-color:hsla(0,0%,100%,.8);transition:background-color 1s;width:284px;padding:10px}body.close .content{transform:translateX(300px)}body.close .app-nav,body.close .github-corner{display:none}.github-corner:hover .octo-arm{-webkit-animation:none;animation:none}.github-corner .octo-arm{-webkit-animation:octocat-wave .56s ease-in-out;animation:octocat-wave .56s ease-in-out}}@-webkit-keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}section.cover{align-items:center;background-position:50%;background-repeat:no-repeat;background-size:cover;height:100vh;width:100vw;display:none}section.cover.show{display:flex}section.cover.has-mask .mask{background-color:#fff;opacity:.8;position:absolute;top:0;height:100%;width:100%}section.cover .cover-main{flex:1;margin:-20px 16px 0;text-align:center}section.cover a{color:inherit}section.cover a,section.cover a:hover{text-decoration:none}section.cover p{line-height:1.5rem;margin:1em 0}section.cover h1{color:inherit;font-size:2.5rem;font-weight:300;margin:.625rem 0 2.5rem;position:relative;text-align:center}section.cover h1 a{display:block}section.cover h1 small{bottom:-.4375rem;font-size:1rem;position:absolute}section.cover blockquote{font-size:1.5rem;text-align:center}section.cover ul{line-height:1.8;list-style-type:none;margin:1em auto;max-width:500px;padding:0}section.cover .cover-main>p:last-child a{border-radius:2rem;border:1px solid var(--theme-color,#42b983);box-sizing:border-box;color:var(--theme-color,#42b983);display:inline-block;font-size:1.05rem;letter-spacing:.1rem;margin:.5rem 1rem;padding:.75em 2rem;text-decoration:none;transition:all .15s ease}section.cover .cover-main>p:last-child a:last-child{background-color:var(--theme-color,#42b983);color:#fff}section.cover .cover-main>p:last-child a:last-child:hover{color:inherit;opacity:.8}section.cover .cover-main>p:last-child a:hover{color:inherit}section.cover blockquote>p>a{border-bottom:2px solid var(--theme-color,#42b983);transition:color .3s}section.cover blockquote>p>a:hover{color:var(--theme-color,#42b983)}.sidebar,body{background-color:#fff}.sidebar{color:#364149}.sidebar li{margin:6px 0}.sidebar ul li a{color:#505d6b;font-size:14px;font-weight:400;overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.sidebar ul li a:hover{text-decoration:underline}.sidebar ul li ul{padding:0}.sidebar ul li.active>a{border-right:2px solid;color:var(--theme-color,#42b983);font-weight:600}.app-sub-sidebar li:before{content:"-";padding-right:4px;float:left}.markdown-section h1,.markdown-section h2,.markdown-section h3,.markdown-section h4,.markdown-section strong{color:#2c3e50;font-weight:600}.markdown-section a{color:var(--theme-color,#42b983);font-weight:600}.markdown-section h1{font-size:2rem;margin:0 0 1rem}.markdown-section h2{font-size:1.75rem;margin:45px 0 .8rem}.markdown-section h3{font-size:1.5rem;margin:40px 0 .6rem}.markdown-section h4{font-size:1.25rem}.markdown-section h5{font-size:1rem}.markdown-section h6{color:#777;font-size:1rem}.markdown-section figure,.markdown-section p{margin:1.2em 0}.markdown-section ol,.markdown-section p,.markdown-section ul{line-height:1.6rem;word-spacing:.05rem}.markdown-section ol,.markdown-section ul{padding-left:1.5rem}.markdown-section blockquote{border-left:4px solid var(--theme-color,#42b983);color:#858585;margin:2em 0;padding-left:20px}.markdown-section blockquote p{font-weight:600;margin-left:0}.markdown-section iframe{margin:1em 0}.markdown-section em{color:#7f8c8d}.markdown-section code{border-radius:2px;color:#e96900;font-size:.8rem;margin:0 2px;padding:3px 5px;white-space:pre-wrap}.markdown-section code,.markdown-section pre{background-color:#f8f8f8;font-family:Roboto Mono,Monaco,courier,monospace}.markdown-section pre{-moz-osx-font-smoothing:initial;-webkit-font-smoothing:initial;line-height:1.5rem;margin:1.2em 0;overflow:auto;padding:0 1.4rem;position:relative;word-wrap:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8e908c}.token.namespace{opacity:.7}.token.boolean,.token.number{color:#c76b29}.token.punctuation{color:#525252}.token.property{color:#c08b30}.token.tag{color:#2973b7}.token.string{color:var(--theme-color,#42b983)}.token.selector{color:#6679cc}.token.attr-name{color:#2973b7}.language-css .token.string,.style .token.string,.token.entity,.token.url{color:#22a2c9}.token.attr-value,.token.control,.token.directive,.token.unit{color:var(--theme-color,#42b983)}.token.function,.token.keyword{color:#e96900}.token.atrule,.token.regex,.token.statement{color:#22a2c9}.token.placeholder,.token.variable{color:#3d8fd1}.token.deleted{text-decoration:line-through}.token.inserted{border-bottom:1px dotted #202746;text-decoration:none}.token.italic{font-style:italic}.token.bold,.token.important{font-weight:700}.token.important{color:#c94922}.token.entity{cursor:help}.markdown-section pre>code{-moz-osx-font-smoothing:initial;-webkit-font-smoothing:initial;background-color:#f8f8f8;border-radius:2px;color:#525252;display:block;font-family:Roboto Mono,Monaco,courier,monospace;font-size:.8rem;line-height:inherit;margin:0 2px;max-width:inherit;overflow:inherit;padding:2.2em 5px;white-space:inherit}.markdown-section code:after,.markdown-section code:before{letter-spacing:.05rem}code .token{-moz-osx-font-smoothing:initial;-webkit-font-smoothing:initial;min-height:1.5rem;position:relative;left:auto}pre:after{color:#ccc;content:attr(data-lang);font-size:.6rem;font-weight:600;height:15px;line-height:15px;padding:5px 10px 0;position:absolute;right:0;text-align:right;top:0} -} \ No newline at end of file + /* @media (screen) { */ + body:not(.ready) { + overflow: hidden; + } + body:not(.ready) .app-nav, + body:not(.ready) > nav, + body:not(.ready) [data-cloak] { + display: none; + } + div#app { + font-size: 30px; + font-weight: lighter; + margin: 40vh auto; + text-align: center; + } + div#app:empty:before { + content: 'Loading...'; + } + .emoji { + height: 1.2rem; + vertical-align: middle; + } + .progress { + background-color: var(--theme-color, #42b983); + height: 2px; + left: 0; + position: fixed; + right: 0; + top: 0; + transition: width 0.2s, opacity 0.4s; + width: 0; + z-index: 999999; + } + .search .search-keyword, + .search a:hover { + color: var(--theme-color, #42b983); + } + .search .search-keyword { + font-style: normal; + font-weight: 700; + } + body, + html { + height: 100%; + } + body { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + color: #34495e; + font-family: Source Sans Pro, Helvetica Neue, Arial, sans-serif; + font-size: 15px; + letter-spacing: 0; + margin: 0; + overflow-x: hidden; + } + img { + max-width: 100%; + } + a[disabled] { + cursor: not-allowed; + opacity: 0.6; + } + kbd { + border: 1px solid #ccc; + border-radius: 3px; + display: inline-block; + font-size: 12px !important; + line-height: 12px; + margin-bottom: 3px; + padding: 3px 5px; + vertical-align: middle; + } + li input[type='checkbox'] { + margin: 0 0.2em 0.25em 0; + vertical-align: middle; + } + .app-nav { + margin: 25px 60px 0 0; + position: absolute; + right: 0; + text-align: right; + z-index: 10; + } + .app-nav.no-badge { + margin-right: 25px; + } + .app-nav p { + margin: 0; + } + .app-nav > a { + margin: 0 1rem; + padding: 5px 0; + } + .app-nav li, + .app-nav ul { + display: inline-block; + list-style: none; + margin: 0; + } + .app-nav a { + color: inherit; + font-size: 16px; + text-decoration: none; + transition: color 0.3s; + } + .app-nav a.active, + .app-nav a:hover { + color: var(--theme-color, #42b983); + } + .app-nav a.active { + border-bottom: 2px solid var(--theme-color, #42b983); + } + .app-nav li { + display: inline-block; + margin: 0 1rem; + padding: 5px 0; + position: relative; + cursor: pointer; + } + .app-nav li ul { + background-color: #fff; + border: 1px solid; + border-color: #ddd #ddd #ccc; + border-radius: 4px; + box-sizing: border-box; + display: none; + max-height: calc(100vh - 61px); + overflow-y: auto; + padding: 10px 0; + position: absolute; + right: -15px; + text-align: left; + top: 100%; + white-space: nowrap; + } + .app-nav li ul li { + display: block; + font-size: 14px; + line-height: 1rem; + margin: 8px 14px; + white-space: nowrap; + } + .app-nav li ul a { + display: block; + font-size: inherit; + margin: 0; + padding: 0; + } + .app-nav li ul a.active { + border-bottom: 0; + } + .app-nav li:hover ul { + display: block; + } + .github-corner { + border-bottom: 0; + position: fixed; + right: 0; + text-decoration: none; + top: 0; + z-index: 1; + } + .github-corner:hover .octo-arm { + -webkit-animation: octocat-wave 0.56s ease-in-out; + animation: octocat-wave 0.56s ease-in-out; + } + .github-corner svg { + color: #fff; + fill: var(--theme-color, #42b983); + height: 80px; + width: 80px; + } + main { + display: block; + position: relative; + width: 100vw; + height: 100%; + z-index: 0; + } + main.hidden { + display: none; + } + .anchor { + display: inline-block; + text-decoration: none; + transition: all 0.3s; + } + .anchor span { + color: #34495e; + } + .anchor:hover { + text-decoration: underline; + } + .sidebar { + border-right: 1px solid rgba(0, 0, 0, 0.07); + overflow-y: auto; + padding: 40px 0 0; + position: absolute; + top: 0; + bottom: 0; + left: 0; + transition: transform 0.25s ease-out; + width: 300px; + z-index: 20; + } + .sidebar > h1 { + margin: 0 auto 1rem; + font-size: 1.5rem; + font-weight: 300; + text-align: center; + } + .sidebar > h1 a { + color: inherit; + text-decoration: none; + } + .sidebar > h1 .app-nav { + display: block; + position: static; + } + .sidebar .sidebar-nav { + line-height: 2em; + padding-bottom: 40px; + } + .sidebar li.collapse .app-sub-sidebar { + display: none; + } + .sidebar ul { + margin: 0 0 0 15px; + padding: 0; + } + .sidebar li > p { + font-weight: 700; + margin: 0; + } + .sidebar ul, + .sidebar ul li { + list-style: none; + } + .sidebar ul li a { + border-bottom: none; + display: block; + } + .sidebar ul li ul { + padding-left: 20px; + } + .sidebar::-webkit-scrollbar { + width: 4px; + } + .sidebar::-webkit-scrollbar-thumb { + background: transparent; + border-radius: 4px; + } + .sidebar:hover::-webkit-scrollbar-thumb { + background: hsla(0, 0%, 53.3%, 0.4); + } + .sidebar:hover::-webkit-scrollbar-track { + background: hsla(0, 0%, 53.3%, 0.1); + } + .sidebar-toggle { + background-color: transparent; + background-color: hsla(0, 0%, 100%, 0.8); + border: 0; + outline: none; + padding: 10px; + position: absolute; + bottom: 0; + left: 0; + text-align: center; + transition: opacity 0.3s; + width: 284px; + z-index: 30; + cursor: pointer; + } + .sidebar-toggle:hover .sidebar-toggle-button { + opacity: 0.4; + } + .sidebar-toggle span { + background-color: var(--theme-color, #42b983); + display: block; + margin-bottom: 4px; + width: 16px; + height: 2px; + } + body.sticky .sidebar, + body.sticky .sidebar-toggle { + position: fixed; + } + .content { + padding-top: 60px; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 300px; + transition: left 0.25s ease; + } + .markdown-section { + margin: 0 auto; + max-width: 80%; + padding: 30px 15px 40px; + position: relative; + } + .markdown-section > * { + box-sizing: border-box; + font-size: inherit; + } + .markdown-section > :first-child { + margin-top: 0 !important; + } + .markdown-section hr { + border: none; + border-bottom: 1px solid #eee; + margin: 2em 0; + } + .markdown-section iframe { + border: 1px solid #eee; + width: 1px; + min-width: 100%; + } + .markdown-section table { + border-collapse: collapse; + border-spacing: 0; + display: block; + margin-bottom: 1rem; + overflow: auto; + width: 100%; + } + .markdown-section th { + font-weight: 700; + } + .markdown-section td, + .markdown-section th { + border: 1px solid #ddd; + padding: 6px 13px; + } + .markdown-section tr { + border-top: 1px solid #ccc; + } + .markdown-section p.tip, + .markdown-section tr:nth-child(2n) { + background-color: #f8f8f8; + } + .markdown-section p.tip { + border-bottom-right-radius: 2px; + border-left: 4px solid #f66; + border-top-right-radius: 2px; + margin: 2em 0; + padding: 12px 24px 12px 30px; + position: relative; + } + .markdown-section p.tip:before { + background-color: #f66; + border-radius: 100%; + color: #fff; + content: '!'; + font-family: Dosis, Source Sans Pro, Helvetica Neue, Arial, sans-serif; + font-size: 14px; + font-weight: 700; + left: -12px; + line-height: 20px; + position: absolute; + height: 20px; + width: 20px; + text-align: center; + top: 14px; + } + .markdown-section p.tip code { + background-color: #efefef; + } + .markdown-section p.tip em { + color: #34495e; + } + .markdown-section p.warn { + background: rgba(66, 185, 131, 0.1); + border-radius: 2px; + padding: 1rem; + } + .markdown-section ul.task-list > li { + list-style-type: none; + } + body.close .sidebar { + transform: translateX(-300px); + } + body.close .sidebar-toggle { + width: auto; + } + body.close .content { + left: 0; + } + @media print { + .app-nav, + .github-corner, + .sidebar, + .sidebar-toggle { + display: none; + } + } + @media screen and (max-width: 768px) { + .github-corner, + .sidebar, + .sidebar-toggle { + position: fixed; + } + .app-nav { + margin-top: 16px; + } + .app-nav li ul { + top: 30px; + } + main { + height: auto; + overflow-x: hidden; + } + .sidebar { + left: -300px; + transition: transform 0.25s ease-out; + } + .content { + left: 0; + max-width: 100vw; + position: static; + padding-top: 20px; + transition: transform 0.25s ease; + } + .app-nav, + .github-corner { + transition: transform 0.25s ease-out; + } + .sidebar-toggle { + background-color: transparent; + width: auto; + padding: 30px 30px 10px 10px; + } + body.close .sidebar { + transform: translateX(300px); + } + body.close .sidebar-toggle { + background-color: hsla(0, 0%, 100%, 0.8); + transition: background-color 1s; + width: 284px; + padding: 10px; + } + body.close .content { + transform: translateX(300px); + } + body.close .app-nav, + body.close .github-corner { + display: none; + } + .github-corner:hover .octo-arm { + -webkit-animation: none; + animation: none; + } + .github-corner .octo-arm { + -webkit-animation: octocat-wave 0.56s ease-in-out; + animation: octocat-wave 0.56s ease-in-out; + } + } + @-webkit-keyframes octocat-wave { + 0%, + to { + transform: rotate(0); + } + 20%, + 60% { + transform: rotate(-25deg); + } + 40%, + 80% { + transform: rotate(10deg); + } + } + @keyframes octocat-wave { + 0%, + to { + transform: rotate(0); + } + 20%, + 60% { + transform: rotate(-25deg); + } + 40%, + 80% { + transform: rotate(10deg); + } + } + section.cover { + align-items: center; + background-position: 50%; + background-repeat: no-repeat; + background-size: cover; + height: 100vh; + width: 100vw; + display: none; + } + section.cover.show { + display: flex; + } + section.cover.has-mask .mask { + background-color: #fff; + opacity: 0.8; + position: absolute; + top: 0; + height: 100%; + width: 100%; + } + section.cover .cover-main { + flex: 1; + margin: -20px 16px 0; + text-align: center; + } + section.cover a { + color: inherit; + } + section.cover a, + section.cover a:hover { + text-decoration: none; + } + section.cover p { + line-height: 1.5rem; + margin: 1em 0; + } + section.cover h1 { + color: inherit; + font-size: 2.5rem; + font-weight: 300; + margin: 0.625rem 0 2.5rem; + position: relative; + text-align: center; + } + section.cover h1 a { + display: block; + } + section.cover h1 small { + bottom: -0.4375rem; + font-size: 1rem; + position: absolute; + } + section.cover blockquote { + font-size: 1.5rem; + text-align: center; + } + section.cover ul { + line-height: 1.8; + list-style-type: none; + margin: 1em auto; + max-width: 500px; + padding: 0; + } + section.cover .cover-main > p:last-child a { + border-radius: 2rem; + border: 1px solid var(--theme-color, #42b983); + box-sizing: border-box; + color: var(--theme-color, #42b983); + display: inline-block; + font-size: 1.05rem; + letter-spacing: 0.1rem; + margin: 0.5rem 1rem; + padding: 0.75em 2rem; + text-decoration: none; + transition: all 0.15s ease; + } + section.cover .cover-main > p:last-child a:last-child { + background-color: var(--theme-color, #42b983); + color: #fff; + } + section.cover .cover-main > p:last-child a:last-child:hover { + color: inherit; + opacity: 0.8; + } + section.cover .cover-main > p:last-child a:hover { + color: inherit; + } + section.cover blockquote > p > a { + border-bottom: 2px solid var(--theme-color, #42b983); + transition: color 0.3s; + } + section.cover blockquote > p > a:hover { + color: var(--theme-color, #42b983); + } + .sidebar, + body { + background-color: #fff; + } + .sidebar { + color: #364149; + } + .sidebar li { + margin: 6px 0; + } + .sidebar ul li a { + color: #505d6b; + font-size: 14px; + font-weight: 400; + overflow: hidden; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + } + .sidebar ul li a:hover { + text-decoration: underline; + } + .sidebar ul li ul { + padding: 0; + } + .sidebar ul li.active > a { + border-right: 2px solid; + color: var(--theme-color, #42b983); + font-weight: 600; + } + .app-sub-sidebar li:before { + content: '-'; + padding-right: 4px; + float: left; + } + .markdown-section h1, + .markdown-section h2, + .markdown-section h3, + .markdown-section h4, + .markdown-section strong { + color: #2c3e50; + font-weight: 600; + } + .markdown-section a { + color: var(--theme-color, #42b983); + font-weight: 600; + } + .markdown-section h1 { + font-size: 2rem; + margin: 0 0 1rem; + } + .markdown-section h2 { + font-size: 1.75rem; + margin: 45px 0 0.8rem; + } + .markdown-section h3 { + font-size: 1.5rem; + margin: 40px 0 0.6rem; + } + .markdown-section h4 { + font-size: 1.25rem; + } + .markdown-section h5 { + font-size: 1rem; + } + .markdown-section h6 { + color: #777; + font-size: 1rem; + } + .markdown-section figure, + .markdown-section p { + margin: 1.2em 0; + } + .markdown-section ol, + .markdown-section p, + .markdown-section ul { + line-height: 1.6rem; + word-spacing: 0.05rem; + } + .markdown-section ol, + .markdown-section ul { + padding-left: 1.5rem; + } + .markdown-section blockquote { + border-left: 4px solid var(--theme-color, #42b983); + color: #858585; + margin: 2em 0; + padding-left: 20px; + } + .markdown-section blockquote p { + font-weight: 600; + margin-left: 0; + } + .markdown-section iframe { + margin: 1em 0; + } + .markdown-section em { + color: #7f8c8d; + } + .markdown-section code { + border-radius: 2px; + color: #e96900; + font-size: 0.8rem; + margin: 0 2px; + padding: 3px 5px; + white-space: pre-wrap; + } + .markdown-section code, + .markdown-section pre { + background-color: #f8f8f8; + font-family: Roboto Mono, Monaco, courier, monospace; + } + .markdown-section pre { + -moz-osx-font-smoothing: initial; + -webkit-font-smoothing: initial; + line-height: 1.5rem; + margin: 1.2em 0; + overflow: auto; + padding: 0 1.4rem; + position: relative; + word-wrap: normal; + } + .token.cdata, + .token.comment, + .token.doctype, + .token.prolog { + color: #8e908c; + } + .token.namespace { + opacity: 0.7; + } + .token.boolean, + .token.number { + color: #c76b29; + } + .token.punctuation { + color: #525252; + } + .token.property { + color: #c08b30; + } + .token.tag { + color: #2973b7; + } + .token.string { + color: var(--theme-color, #42b983); + } + .token.selector { + color: #6679cc; + } + .token.attr-name { + color: #2973b7; + } + .language-css .token.string, + .style .token.string, + .token.entity, + .token.url { + color: #22a2c9; + } + .token.attr-value, + .token.control, + .token.directive, + .token.unit { + color: var(--theme-color, #42b983); + } + .token.function, + .token.keyword { + color: #e96900; + } + .token.atrule, + .token.regex, + .token.statement { + color: #22a2c9; + } + .token.placeholder, + .token.variable { + color: #3d8fd1; + } + .token.deleted { + text-decoration: line-through; + } + .token.inserted { + border-bottom: 1px dotted #202746; + text-decoration: none; + } + .token.italic { + font-style: italic; + } + .token.bold, + .token.important { + font-weight: 700; + } + .token.important { + color: #c94922; + } + .token.entity { + cursor: help; + } + .markdown-section pre > code { + -moz-osx-font-smoothing: initial; + -webkit-font-smoothing: initial; + background-color: #f8f8f8; + border-radius: 2px; + color: #525252; + display: block; + font-family: Roboto Mono, Monaco, courier, monospace; + font-size: 0.8rem; + line-height: inherit; + margin: 0 2px; + max-width: inherit; + overflow: inherit; + padding: 2.2em 5px; + white-space: inherit; + } + .markdown-section code:after, + .markdown-section code:before { + letter-spacing: 0.05rem; + } + code .token { + -moz-osx-font-smoothing: initial; + -webkit-font-smoothing: initial; + min-height: 1.5rem; + position: relative; + left: auto; + } + pre:after { + color: #ccc; + content: attr(data-lang); + font-size: 0.6rem; + font-weight: 600; + height: 15px; + line-height: 15px; + padding: 5px 10px 0; + position: absolute; + right: 0; + text-align: right; + top: 0; + } +} diff --git a/docs/theming.md b/docs/theming.md index e7429c7f9..287499eff 100644 --- a/docs/theming.md +++ b/docs/theming.md @@ -30,8 +30,8 @@ Example of `Initialize` call setting `theme` to `base`: ```javascript mermaidAPI.initialize({ - securityLevel: 'loose', - theme: 'base', + securityLevel: 'loose', + theme: 'base', }); ``` @@ -276,9 +276,9 @@ Variables that are unique to some diagrams can be affected by changes in Theme V \*\*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 -- set the tertiary color to a reddish shade as well -- make the edge label background differ from the subgraph by setting the edgeLabelBackground +- Make the primary color a little lighter +- set the tertiary color to a reddish shade as well +- make the edge label background differ from the subgraph by setting the edgeLabelBackground ```mermaid-example %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ffcccc', 'edgeLabelBackground':'#ffffee', 'tertiaryColor': '#fff0f0'}}}%% diff --git a/docs/upgrading.md b/docs/upgrading.md index 95547de85..fd7f72d82 100644 --- a/docs/upgrading.md +++ b/docs/upgrading.md @@ -14,7 +14,7 @@ Some of the interfaces has been upgraded. ```javascript mermaid_config = { - startOnLoad: true, + startOnLoad: true, }; ``` @@ -22,6 +22,6 @@ mermaid_config = { ```javascript mermaid.initialize({ - startOnLoad: true, + startOnLoad: true, }); ``` diff --git a/docs/usage.md b/docs/usage.md index da9caba96..8587e03c4 100644 --- a/docs/usage.md +++ b/docs/usage.md @@ -51,7 +51,7 @@ The easiest way to integrate mermaid on a web page requires three elements: ```html <script> - mermaid.initialize({ startOnLoad: true }); + mermaid.initialize({ startOnLoad: true }); </script> ``` @@ -68,16 +68,16 @@ locate the graph definitions inside the `div` tags with `class="mermaid"` and re ```html <!DOCTYPE html> <html lang="en"> - <head> - <meta charset="utf-8" /> - </head> - <body> - <div class="mermaid">graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);</div> - <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> - <script> - mermaid.initialize({ startOnLoad: true }); - </script> - </body> + <head> + <meta charset="utf-8" /> + </head> + <body> + <div class="mermaid">graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);</div> + <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> + <script> + mermaid.initialize({ startOnLoad: true }); + </script> + </body> </html> ``` @@ -103,10 +103,10 @@ A `securityLevel` configuration has to first be cleared, `securityLevel` sets th Values: -- **strict**: (**default**) tags in text are encoded, click functionality is disabled -- **loose**: tags in text are allowed, click functionality is enabled -- **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled -- **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This prevent any JavaScript running in the context. This may hinder interactive functionality of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc. +- **strict**: (**default**) tags in text are encoded, click functionality is disabled +- **loose**: tags in text are allowed, click functionality is enabled +- **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled +- **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This prevent any JavaScript running in the context. This may hinder interactive functionality of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc. ```note This changes the default behaviour of mermaid so that after upgrade to 8.2, unless the `securityLevel` is not changed, tags in flowcharts are encoded as tags and clicking is disabled. @@ -119,7 +119,7 @@ This changes the default behaviour of mermaid so that after upgrade to 8.2, unle ```javascript mermaidAPI.initialize({ - securityLevel: 'loose', + securityLevel: 'loose', }); ``` @@ -130,7 +130,7 @@ whole page to load (dom + assets, particularly the fonts file). ```javascript $(document).load(function () { - mermaid.initialize(); + mermaid.initialize(); }); ``` @@ -138,7 +138,7 @@ or ```javascript $(document).ready(function () { - mermaid.initialize(); + mermaid.initialize(); }); ``` @@ -148,7 +148,7 @@ If your page has other fonts in its body those might be used instead of the merm ```css div.mermaid { - font-family: 'trebuchet ms', verdana, arial; + font-family: 'trebuchet ms', verdana, arial; } ``` @@ -158,11 +158,11 @@ By default, `mermaid.init` will be called when the document is ready, finding al `class="mermaid"`. If you are adding content after mermaid is loaded, or otherwise need finer-grained control of this behavior, you can call `init` yourself with: -- a configuration object -- some nodes, as - - a node - - an array-like of nodes - - or W3C selector that will find your nodes +- a configuration object +- some nodes, as + - a node + - an array-like of nodes + - or W3C selector that will find your nodes Example: @@ -196,16 +196,16 @@ The example below show an outline of how this could be used. The example just lo <script src="mermaid.js"></script> <script> - mermaid.mermaidAPI.initialize({ startOnLoad: false }); - $(function () { - // Example of using the API var - element = document.querySelector('#graphDiv'); - var insertSvg = function (svgCode, bindFunctions) { - element.innerHTML = svgCode; - }; - var graphDefinition = 'graph TB\na-->b'; - var graph = mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg); - }); + mermaid.mermaidAPI.initialize({ startOnLoad: false }); + $(function () { + // Example of using the API var + element = document.querySelector('#graphDiv'); + var insertSvg = function (svgCode, bindFunctions) { + element.innerHTML = svgCode; + }; + var graphDefinition = 'graph TB\na-->b'; + var graph = mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg); + }); </script> ``` @@ -219,11 +219,11 @@ bind events to an SVG when using the API for rendering. ```javascript var insertSvg = function (svgCode, bindFunctions) { - element.innerHTML = svgCode; - if (typeof callback !== 'undefined') { - callback(id); - } - bindFunctions(element); + element.innerHTML = svgCode; + if (typeof callback !== 'undefined') { + callback(id); + } + bindFunctions(element); }; var id = 'theGraph'; @@ -244,11 +244,11 @@ This is the renderer used for transforming the documentation from Markdown to ht ```javascript var renderer = new marked.Renderer(); renderer.code = function (code, language) { - if (code.match(/^sequenceDiagram/) || code.match(/^graph/)) { - return '<div class="mermaid">' + code + '</div>'; - } else { - return '<pre><code>' + code + '</code></pre>'; - } + if (code.match(/^sequenceDiagram/) || code.match(/^graph/)) { + return '<div class="mermaid">' + code + '</div>'; + } else { + return '<pre><code>' + code + '</code></pre>'; + } }; ``` @@ -290,15 +290,15 @@ The code-example below in meta code illustrates how this could work: ```javascript mermaid.parseError = function (err, hash) { - displayErrorInGui(err); + displayErrorInGui(err); }; var textFieldUpdated = function () { - var textStr = getTextFromFormField('code'); + var textStr = getTextFromFormField('code'); - if (mermaid.parse(textStr)) { - reRender(textStr); - } + if (mermaid.parse(textStr)) { + reRender(textStr); + } }; bindEventHandler('change', 'code', textFieldUpdated); @@ -328,8 +328,8 @@ on what kind of integration you use. ```html <script src="../dist/mermaid.js"></script> <script> - var config = { startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true } }; - mermaid.initialize(config); + var config = { startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true } }; + mermaid.initialize(config); </script> ``` @@ -344,8 +344,8 @@ This is the preferred way of configuring mermaid. Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this approach are: -- mermaid.startOnLoad -- mermaid.htmlLabels +- mermaid.startOnLoad +- mermaid.htmlLabels ```javascript mermaid.startOnLoad = true; @@ -360,8 +360,8 @@ This way of setting the configuration is deprecated. Instead the preferred way i It is possible to set some configuration via the mermaid object. The two parameters that are supported using this approach are: -- mermaid_config.startOnLoad -- mermaid_config.htmlLabels +- mermaid_config.startOnLoad +- mermaid_config.htmlLabels ```javascript mermaid_config.startOnLoad = true; @@ -375,8 +375,8 @@ This way of setting the configuration is deprecated. Instead the preferred way i To set some configuration via the mermaid object. The two parameters that are supported using this approach are: -- mermaid_config.startOnLoad -- mermaid_config.htmlLabels +- mermaid_config.startOnLoad +- mermaid_config.htmlLabels ```javascript mermaid_config.startOnLoad = true; diff --git a/package.json b/package.json index d7a80442e..7e5b6d540 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "build:watch": "yarn build:dev --watch", "release": "yarn build", "lint": "eslint --cache --ignore-path .gitignore .; prettier --check .", - "lint:fix": "eslint --cache --fix --ignore-path .gitignore .; prettier --write .", + "lint:fix": "eslint --fix --ignore-path .gitignore .; prettier --write ./src", "e2e:depr": "yarn lint && jest e2e --config e2e/jest.config.js", "cypress": "cypress run", "cypress:open": "cypress open", diff --git a/src/dagre-wrapper/GraphObjects.md b/src/dagre-wrapper/GraphObjects.md index 416dfeb73..5c2486520 100644 --- a/src/dagre-wrapper/GraphObjects.md +++ b/src/dagre-wrapper/GraphObjects.md @@ -16,6 +16,7 @@ flowchart ``` In this case the dagre-wrapper will transform the graph to the graph below. + ```mermaid flowchart C1 --> C2 @@ -28,7 +29,8 @@ When rendering this diagram it it beeing rendered recursively. The diagram is re ``` { clusterNode: true, graph } ``` -*Data for a clusterNode* + +_Data for a clusterNode_ When a cluster has edges to or from some of its nodes leading outside the cluster the approach of recursive rendering can not be used as the layout of the graph needs to take responsibility for nodes outside of the cluster. @@ -49,7 +51,6 @@ In the diagram above the root diagram would be rendered with C1 whereas C2 would Of these two approaches the top one renders better and is used when possible. When this is not possible, ie an edge is added crossing the border the non recursive approach is used. - # Graph objects and their properties Explains the representation of various objects used to render the flow charts and what the properties mean. This ofc from the perspective of the dagre-wrapper. @@ -57,35 +58,36 @@ Explains the representation of various objects used to render the flow charts an ## node Sample object: + ```json { - "shape":"rect", - "labelText":"Test", - "rx":0, - "ry":0, - "class":"default", - "style":"", - "id":"Test", - "type":"group", - "padding":15} + "shape": "rect", + "labelText": "Test", + "rx": 0, + "ry": 0, + "class": "default", + "style": "", + "id": "Test", + "type": "group", + "padding": 15 +} ``` This is set by the renderer of the diagram and insert the data that the wrapper neds for rendering. -| property | description | -| ---------- | ----------------------------------------------------------------------------------------------------------- | -| labelStyle | Css styles for the label. User for instance for styling the labels for clusters | -| shape | The shape of the node. | -| labelText | The text on the label | -| rx | The corner radius - maybe part of the shape instead? Used for rects. | -| ry | The corner radius - maybe part of the shape instead? Used for rects. | -| classes | Classes to be set for the shape. Not used | -| style | Css styles for the actual shape | -| id | id of the shape | -| type | if set to group then this node indicates *a cluster*. | -| padding | Padding. Passed from the render as this might differ between different diagrams. Maybe obsolete. | -| data | Non-generic data specific to the shape. | - +| property | description | +| ---------- | ------------------------------------------------------------------------------------------------ | +| labelStyle | Css styles for the label. User for instance for styling the labels for clusters | +| shape | The shape of the node. | +| labelText | The text on the label | +| rx | The corner radius - maybe part of the shape instead? Used for rects. | +| ry | The corner radius - maybe part of the shape instead? Used for rects. | +| classes | Classes to be set for the shape. Not used | +| style | Css styles for the actual shape | +| id | id of the shape | +| type | if set to group then this node indicates _a cluster_. | +| padding | Padding. Passed from the render as this might differ between different diagrams. Maybe obsolete. | +| data | Non-generic data specific to the shape. | # edge @@ -100,22 +102,20 @@ double_arrow_circle Lets try to make these types semantic free so that diagram type semantics does not find its way in to this more generic layer. - Required edgeData for proper rendering: -| property | description | -| ---------- | ---------------------------------------- | -| id | Id of the edge | -| arrowHead | overlap between arrowHead and arrowType? | -| arrowType | overlap between arrowHead and arrowType? | -| style | | -| labelStyle | | -| label | overlap between label and labelText? | -| labelPos | | -| labelType | overlap between label and labelText? | -| thickness | Sets the thinkess of the edge. Can be \['normal', 'thick'\] | -| pattern | Sets the pattern of the edge. Can be \['solid', 'dotted', 'dashed'\] | - +| property | description | +| ---------- | -------------------------------------------------------------------- | +| id | Id of the edge | +| arrowHead | overlap between arrowHead and arrowType? | +| arrowType | overlap between arrowHead and arrowType? | +| style | | +| labelStyle | | +| label | overlap between label and labelText? | +| labelPos | | +| labelType | overlap between label and labelText? | +| thickness | Sets the thinkess of the edge. Can be \['normal', 'thick'\] | +| pattern | Sets the pattern of the edge. Can be \['solid', 'dotted', 'dashed'\] | # Markers @@ -127,12 +127,13 @@ insertMarkers(el, \['point', 'circle'\]) The example above adds the markers point and cross. This means that edges with the arrowTypes arrow_cross, double_arrow_cross, arrow_point and double_arrow_cross will get the corresponding markers but arrowType arrow_cross will have no impact. Current markers: -* point - the standard arrow from flowcharts -* circle - Arrows ending with circle -* cross - arrows starting and ending with a cross +- point - the standard arrow from flowcharts +- circle - Arrows ending with circle +- cross - arrows starting and ending with a cross // Todo - in case of common renderer + # Common functions used by the renderer to be implemented by the Db getDirection diff --git a/src/dagre-wrapper/edges.js b/src/dagre-wrapper/edges.js index 677fda9f1..76a3534d9 100644 --- a/src/dagre-wrapper/edges.js +++ b/src/dagre-wrapper/edges.js @@ -240,7 +240,7 @@ export const intersection = (node, outsidePoint, insidePoint) => { const Q = Math.abs(outsidePoint.y - insidePoint.y); const R = Math.abs(outsidePoint.x - insidePoint.x); // log.warn(); - if (Math.abs(y - outsidePoint.y) * w > Math.abs(x - outsidePoint.x) * h) { // eslint-disable-line + if (Math.abs(y - outsidePoint.y) * w > Math.abs(x - outsidePoint.x) * h) { // Intersection is top or bottom of rect. // let q = insidePoint.y < outsidePoint.y ? outsidePoint.y - h - y : y - h - outsidePoint.y; let q = insidePoint.y < outsidePoint.y ? outsidePoint.y - h - y : y - h - outsidePoint.y; diff --git a/src/diagrams/flowchart/flowChartShapes.spec.js b/src/diagrams/flowchart/flowChartShapes.spec.js index d7406e21e..e7e535056 100644 --- a/src/diagrams/flowchart/flowChartShapes.spec.js +++ b/src/diagrams/flowchart/flowChartShapes.spec.js @@ -94,6 +94,9 @@ describe('flowchart shapes', function () { }); }); +/** + * + */ function MockRender() { const shapes = {}; return { @@ -103,6 +106,11 @@ function MockRender() { }; } +/** + * + * @param tag + * @param {...any} args + */ function MockSvg(tag, ...args) { const children = []; const attributes = {}; @@ -139,6 +147,11 @@ function useWidth(w, h) { return w; } +/** + * + * @param w + * @param h + */ function useHeight(w, h) { return h; } diff --git a/src/diagrams/git/gitGraphAst.js b/src/diagrams/git/gitGraphAst.js index 47c3e9f30..9cb18f462 100644 --- a/src/diagrams/git/gitGraphAst.js +++ b/src/diagrams/git/gitGraphAst.js @@ -24,6 +24,9 @@ let curBranch = mainBranchName; let direction = 'LR'; let seq = 0; +/** + * + */ function getId() { // eslint-disable-line return random({ length: 7 }); diff --git a/src/diagrams/git/layout.js b/src/diagrams/git/layout.js index 0f61917ab..5714c2b96 100644 --- a/src/diagrams/git/layout.js +++ b/src/diagrams/git/layout.js @@ -1,6 +1,6 @@ import { getConfig } from '../../config'; -export default (dir, _branches, _commits) => { // eslint-disable-line +export default (dir, _branches, _commits) => { const config = getConfig().gitGraph; const branches = []; const commits = []; diff --git a/src/diagrams/sequence/svgDraw.js b/src/diagrams/sequence/svgDraw.js index 864037c2b..913de84ba 100644 --- a/src/diagrams/sequence/svgDraw.js +++ b/src/diagrams/sequence/svgDraw.js @@ -918,7 +918,7 @@ const _drawTextCandidateFunc = (function () { */ function _setTextAttrs(toText, fromTextAttrsDict) { for (const key in fromTextAttrsDict) { - if (fromTextAttrsDict.hasOwnProperty(key)) { // eslint-disable-line + if (fromTextAttrsDict.hasOwnProperty(key)) { toText.attr(key, fromTextAttrsDict[key]); } } @@ -1026,7 +1026,8 @@ const _drawMenuItemTextCandidateFunc = (function () { */ function _setTextAttrs(toText, fromTextAttrsDict) { for (const key in fromTextAttrsDict) { - if (fromTextAttrsDict.hasOwnProperty(key)) { // eslint-disable-line + if (fromTextAttrsDict.hasOwnProperty(key)) { + // eslint-disable-line toText.attr(key, fromTextAttrsDict[key]); } } diff --git a/src/docs.mts b/src/docs.mts index 84f7d8f5f..b5370144b 100644 --- a/src/docs.mts +++ b/src/docs.mts @@ -53,7 +53,7 @@ const transform = (file: string) => { prettier.format(transformed, { parser: 'markdown', useTabs: false, - tabWidth: 4, + tabWidth: 2, endOfLine: 'auto', printWidth: 100, singleQuote: true, diff --git a/src/docs/8.6.0_docs.md b/src/docs/8.6.0_docs.md index 9a60711b7..6ba835c2e 100644 --- a/src/docs/8.6.0_docs.md +++ b/src/docs/8.6.0_docs.md @@ -15,19 +15,19 @@ the `init` directive is the main method of configuration for Site and Current Le The three levels of are Configuration, Global, Site and Current. -| Level of Configuration | Description | -| --- | --- | -| Global Configuration| Default Mermaid Configurations| -| Site Configuration| Configurations made by site owner| -| Current Configuration| Configurations made by Implementors| - +| Level of Configuration | Description | +| ---------------------- | ----------------------------------- | +| Global Configuration | Default Mermaid Configurations | +| Site Configuration | Configurations made by site owner | +| Current Configuration | Configurations made by Implementors | # Limits to Modifying Configurations + **secure Array** -| Parameter | Description |Type | Required | Values| -| --- | --- | --- | --- | --- | -| secure | Array of parameters excluded from init directive| Array | Required | Any parameters| +| Parameter | Description | Type | Required | Values | +| --------- | ------------------------------------------------ | ----- | -------- | -------------- | +| secure | Array of parameters excluded from init directive | Array | Required | Any parameters | The modifiable parts of the Configuration are limited by the secure array, which is an array of immutable parameters, this array can be expanded by site owners. @@ -43,6 +43,7 @@ Default values for the `secure array` consists of: ['secure', 'securityLevel', ' Implementors can only modify configurations using directives, and cannot change the `secure` array. # Modifying Configurations and directives: + The Two types of directives: are `init` (or `initialize`) and `wrap`. ```note @@ -52,12 +53,12 @@ All directives are enclosed in `%%{ }%%` Older versions of mermaid will not parse directives because `%%` will comment out the directive. This makes the update backwards-compatible. # Init + `init`, or `initialize`: this directive gives the user the ability to overwrite and change the values for any configuration parameters not set in the secure array. -| Parameter | Description |Type | Required | Values| -| --- | --- | --- | --- | --- | -| init | modifies configurations| Directive| Optional | Any parameters not included in the secure array| - +| Parameter | Description | Type | Required | Values | +| --------- | ----------------------- | --------- | -------- | ----------------------------------------------- | +| init | modifies configurations | Directive | Optional | Any parameters not included in the secure array | ```note init would be an argument-directive: `%%{init: { **insert argument here**}}%%` @@ -73,6 +74,7 @@ When deployed within code, init is called before the graph/diagram description. ``` **for example**: + ```mmd %%{init: {"theme": "default", "logLevel": 1 }}%% graph LR @@ -84,11 +86,12 @@ When deployed within code, init is called before the graph/diagram description. f-->g g--> ``` + # Wrap -| Parameter | Description |Type | Required | Values| -| --- | --- | --- | --- | --- | -| wrap | a callable text-wrap function| Directive| Optional | %%{wrap}%%| +| Parameter | Description | Type | Required | Values | +| --------- | ----------------------------- | --------- | -------- | ---------- | +| wrap | a callable text-wrap function | Directive | Optional | %%{wrap}%% | ```note Wrap is a function that is currently only deployable for sequence diagrams. @@ -104,8 +107,8 @@ It is a non-argument directive and can be executed thusly: ![Image showing wrapped text](img/wrapped%20text.png) - # Resetting Configurations: + There are two more functions in the mermaidAPI that can be called by site owners: **reset** and **globalReset**. **reset**: resets the configuration to whatever the last configuration was. This can be done to undo more recent changes set from the last mermaidAPI.initialize({...}) configuration. @@ -115,31 +118,30 @@ There are two more functions in the mermaidAPI that can be called by site owners **Notes**: Both `reset` and `globalReset` are only available to site owners, and as such implementors have to edit their configs using `init`. # Additional Utils to mermaid -• **memoize**: simple caching for computationally expensive functions, reducing rendering time by about 90%. -• **assignWithDepth** - an improvement on previous functions with config.js and `Object.assign`. The purpose of this function is to provide a sane mechanism for merging objects, similar to `object.assign`, but with depth. +• **memoize**: simple caching for computationally expensive functions, reducing rendering time by about 90%. + +• **assignWithDepth** - an improvement on previous functions with config.js and `Object.assign`. The purpose of this function is to provide a sane mechanism for merging objects, similar to `object.assign`, but with depth. Example of **assignWithDepth**: ![Image showing assignWithDepth](img/assignWithDepth.png) - Example of **object.Assign**: ![Image showing object.assign without depth](img/object.assign%20without%20depth.png) -• **calculateTextDimensions**, **calculateTextWidth**， and **calculateTextHeight** - for measuring text dimensions, width and height. +• **calculateTextDimensions**, **calculateTextWidth**， and **calculateTextHeight** - for measuring text dimensions, width and height. **Notes**: For more information on usage, parameters, and return info for these new functions take a look at the jsdocs for them in the utils package. - # New API Requests Introduced in Version 8.6.0 ## setSiteConfig -| Function | Description | Type | Values |Parameters|Returns| -| --------- | ------------------- | ------- | ------------------ | ------------------ | ------------------ | -| `setSiteConfig`|Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array|conf|siteConfig| +| Function | Description | Type | Values | Parameters | Returns | +| --------------- | ------------------------------------- | ----------- | --------------------------------------- | ---------- | ---------- | +| `setSiteConfig` | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array | conf | siteConfig | ```note Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset @@ -151,9 +153,9 @@ Default value: will mirror Global Config ## getSiteConfig -| Function | Description | Type | Values | -| --------- | ------------------- | ------- | ------------------ | -| `getSiteConfig`|Returns the current `siteConfig` base configuration | Get Request | Returns Any Values in `siteConfig`| +| Function | Description | Type | Values | +| --------------- | --------------------------------------------------- | ----------- | ---------------------------------- | +| `getSiteConfig` | Returns the current `siteConfig` base configuration | Get Request | Returns Any Values in `siteConfig` | ```note Returns any values in siteConfig. @@ -161,9 +163,9 @@ Returns any values in siteConfig. ## setConfig -| Function | Description | Type | Values |Parameters|Returns| -| --------- | ------------------- | ------- | ------------------ |----------|-------| -| `setConfig`|Sets the `currentConfig` to desired values | Put Request| Any Values, those in secure array|conf|`currentConfig` merged with the sanitized conf| +| Function | Description | Type | Values | Parameters | Returns | +| ----------- | ------------------------------------------ | ----------- | --------------------------------- | ---------- | ---------------------------------------------- | +| `setConfig` | Sets the `currentConfig` to desired values | Put Request | Any Values, those in secure array | conf | `currentConfig` merged with the sanitized conf | ```note Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any @@ -173,10 +175,9 @@ siteConfig value. ## getConfig -| Function | Description | Type | Return Values | -| --------- | ------------------- | ------- | ------------------ | -| `getConfig` |Obtains the `currentConfig` | Get Request | Any Values from `currentConfig`| - +| Function | Description | Type | Return Values | +| ----------- | --------------------------- | ----------- | ------------------------------- | +| `getConfig` | Obtains the `currentConfig` | Get Request | Any Values from `currentConfig` | ```note Returns any values in currentConfig. @@ -184,9 +185,9 @@ Returns any values in currentConfig. ## sanitize -| Function | Description | Type | Values | -| --------- | ------------------- | ------- | ------------------ | -| `sanitize` |Sets the `siteConfig` to desired values. | Put Request(?) |None| +| Function | Description | Type | Values | +| ---------- | ---------------------------------------- | -------------- | ------ | +| `sanitize` | Sets the `siteConfig` to desired values. | Put Request(?) | None | ```note modifies options in-place @@ -195,15 +196,15 @@ Ensures options parameter does not attempt to override siteConfig secure keys. ## reset -| Function | Description | Type | Required | Values |Parameter| -| --------- | -------------------| ------- | -------- | ------------------ |---------| -| `reset`|Resets `currentConfig` to conf| Put Request | Required | None| conf| +| Function | Description | Type | Required | Values | Parameter | +| -------- | ------------------------------ | ----------- | -------- | ------ | --------- | +| `reset` | Resets `currentConfig` to conf | Put Request | Required | None | conf | ## conf -| Parameter | Description |Type | Required | Values| -| --- | --- | --- | --- | --- | -| `conf`| base set of values, which `currentConfig` could be reset to.| Dictionary | Required | Any Values, with respect to the secure Array| +| Parameter | Description | Type | Required | Values | +| --------- | ------------------------------------------------------------ | ---------- | -------- | -------------------------------------------- | +| `conf` | base set of values, which `currentConfig` could be reset to. | Dictionary | Required | Any Values, with respect to the secure Array | ```note default: current siteConfig (optional, default `getSiteConfig()`) diff --git a/src/docs/CHANGELOG.md b/src/docs/CHANGELOG.md index 408d1587b..b80e52b30 100644 --- a/src/docs/CHANGELOG.md +++ b/src/docs/CHANGELOG.md @@ -26,7 +26,8 @@ Example of `Initalize` call setting `theme` to `base`: ```javascript mermaidAPI.initialize({ - 'securityLevel': 'loose', 'theme': 'base' + securityLevel: 'loose', + theme: 'base', }); ``` @@ -49,11 +50,10 @@ It is also possible to override site-wide theme settings locally, for a specific The easiest way to make a custom theme is to start with the base theme, and just modify theme variables through `themeVariables`, via `%%init%%`. -| Parameter | Description | Type | Required | Objects contained | +| Parameter | Description | Type | Required | Objects contained | | -------------- | ------------------------------------------------------------------ | ----- | -------- | ---------------------------------- | | themeVariables | Array containing objects, modifiable with the `%%init%%` directive | Array | Required | primaryColor, lineColor, textColor | - Here is an example of overriding `primaryColor` and giving everything a different look, using `%%init%%`. ```mmd @@ -117,9 +117,9 @@ This was introduced in version 8.2 as a security improvement, aimed at preventin **Notes:** -- **strict**: (**default**) tags in text are encoded, click functionality is disabled -- **loose**: tags in text are allowed, click functionality is enabled -- **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled +- **strict**: (**default**) tags in text are encoded, click functionality is disabled +- **loose**: tags in text are allowed, click functionality is enabled +- **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled ⚠️ **Note**: This changes the default behaviour of mermaid so that after upgrade to 8.2, if the `securityLevel` is not configured, tags in flowcharts are encoded as tags and clicking is prohibited. @@ -129,9 +129,9 @@ By doing this clicks and tags are again allowed. ### To change `securityLevel` with `mermaidAPI.initialize`: ```javascript - mermaidAPI.initialize({ - securityLevel: 'loose' - }); +mermaidAPI.initialize({ + securityLevel: 'loose', +}); ``` **Closed issues:** @@ -160,9 +160,9 @@ By doing this clicks and tags are again allowed. - 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) +- 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) +- 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) @@ -175,18 +175,18 @@ By doing this clicks and tags are again allowed. - 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) +- \[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) +- 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) +- 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) @@ -221,7 +221,7 @@ By doing this clicks and tags are again allowed. - 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) +- 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) @@ -248,7 +248,7 @@ By doing this clicks and tags are again allowed. - 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) +- 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) @@ -271,7 +271,7 @@ By doing this clicks and tags are again allowed. - 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 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) @@ -282,7 +282,7 @@ By doing this clicks and tags are again allowed. - 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) +- 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) @@ -312,7 +312,7 @@ By doing this clicks and tags are again allowed. - 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) +- 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) @@ -346,13 +346,14 @@ By doing this clicks and tags are again allowed. - 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)) +- 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) + [Full Changelog](https://github.com/knsv/mermaid/compare/7.0.3...7.0.5) **Closed issues:** @@ -376,6 +377,7 @@ By doing this clicks and tags are again allowed. - New documentation - need improved logo [\#216](https://github.com/knsv/mermaid/issues/216) ## [7.0.3](https://github.com/knsv/mermaid/tree/7.0.3) (2017-06-04) + [Full Changelog](https://github.com/knsv/mermaid/compare/7.0.2...7.0.3) **Closed issues:** @@ -384,6 +386,7 @@ By doing this clicks and tags are again allowed. - Good example of interactivity with mermaidAPI [\#514](https://github.com/knsv/mermaid/issues/514) ## [7.0.2](https://github.com/knsv/mermaid/tree/7.0.2) (2017-06-01) + [Full Changelog](https://github.com/knsv/mermaid/compare/7.0.0...7.0.2) **Closed issues:** @@ -421,6 +424,7 @@ By doing this clicks and tags are again allowed. - add par statement to sequenceDiagram [\#470](https://github.com/knsv/mermaid/pull/470) ([u-minor](https://github.com/u-minor)) ## [7.0.0](https://github.com/knsv/mermaid/tree/7.0.0) (2017-01-29) + [Full Changelog](https://github.com/knsv/mermaid/compare/6.0.0...7.0.0) **Implemented enhancements:** @@ -434,7 +438,7 @@ By doing this clicks and tags are again allowed. - 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) +- 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) @@ -459,7 +463,7 @@ By doing this clicks and tags are again allowed. - 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)) +- \#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)) @@ -474,6 +478,7 @@ By doing this clicks and tags are again allowed. - 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) + [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.8...6.0.0) **Closed issues:** @@ -512,9 +517,11 @@ By doing this clicks and tags are again allowed. - Quote phantomPath so that it doesn't fail on window [\#286](https://github.com/knsv/mermaid/pull/286) ([raghur](https://github.com/raghur)) ## [0.5.8](https://github.com/knsv/mermaid/tree/0.5.8) (2016-01-27) + [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.7...0.5.8) ## [0.5.7](https://github.com/knsv/mermaid/tree/0.5.7) (2016-01-25) + [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.6...0.5.7) **Closed issues:** @@ -536,6 +543,7 @@ By doing this clicks and tags are again allowed. - Allow sequenceDiagram participant aliasing [\#265](https://github.com/knsv/mermaid/pull/265) ([gibson042](https://github.com/gibson042)) ## [0.5.6](https://github.com/knsv/mermaid/tree/0.5.6) (2015-11-22) + [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.5...0.5.6) **Implemented enhancements:** @@ -572,6 +580,7 @@ By doing this clicks and tags are again allowed. - Add a Gitter chat badge to README.md [\#230](https://github.com/knsv/mermaid/pull/230) ([gitter-badger](https://github.com/gitter-badger)) ## [0.5.5](https://github.com/knsv/mermaid/tree/0.5.5) (2015-10-21) + [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.4...0.5.5) **Closed issues:** @@ -583,6 +592,7 @@ By doing this clicks and tags are again allowed. - Fix a typo: crosshead --\> arrowhead [\#228](https://github.com/knsv/mermaid/pull/228) ([tylerlong](https://github.com/tylerlong)) ## [0.5.4](https://github.com/knsv/mermaid/tree/0.5.4) (2015-10-19) + [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.3...0.5.4) **Implemented enhancements:** @@ -608,9 +618,11 @@ By doing this clicks and tags are again allowed. - Remove duplicate npm dependencies: d3 and he [\#223](https://github.com/knsv/mermaid/pull/223) ([spect88](https://github.com/spect88)) ## [0.5.3](https://github.com/knsv/mermaid/tree/0.5.3) (2015-10-04) + [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.2...0.5.3) ## [0.5.2](https://github.com/knsv/mermaid/tree/0.5.2) (2015-10-04) + [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.1...0.5.2) **Implemented enhancements:** @@ -623,7 +635,7 @@ By doing this clicks and tags are again allowed. - 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) +- 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) @@ -650,7 +662,7 @@ By doing this clicks and tags are again allowed. - 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) +- 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) @@ -663,6 +675,7 @@ By doing this clicks and tags are again allowed. - Update phantomscript.js [\#182](https://github.com/knsv/mermaid/pull/182) ([phairow](https://github.com/phairow)) ## [0.5.1](https://github.com/knsv/mermaid/tree/0.5.1) (2015-06-21) + [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.0...0.5.1) **Implemented enhancements:** @@ -699,6 +712,7 @@ By doing this clicks and tags are again allowed. - Remove moot `version` property from bower.json [\#172](https://github.com/knsv/mermaid/pull/172) ([kkirsche](https://github.com/kkirsche)) ## [0.5.0](https://github.com/knsv/mermaid/tree/0.5.0) (2015-06-07) + [Full Changelog](https://github.com/knsv/mermaid/compare/0.4.0...0.5.0) **Implemented enhancements:** @@ -734,6 +748,7 @@ By doing this clicks and tags are again allowed. - Use a library-level variable for assigning ids [\#134](https://github.com/knsv/mermaid/pull/134) ([bollwyvl](https://github.com/bollwyvl)) ## [0.4.0](https://github.com/knsv/mermaid/tree/0.4.0) (2015-03-01) + [Full Changelog](https://github.com/knsv/mermaid/compare/0.3.5...0.4.0) **Implemented enhancements:** @@ -752,9 +767,11 @@ By doing this clicks and tags are again allowed. - Internet Explorer Support [\#99](https://github.com/knsv/mermaid/issues/99) ## [0.3.5](https://github.com/knsv/mermaid/tree/0.3.5) (2015-02-15) + [Full Changelog](https://github.com/knsv/mermaid/compare/0.3.4...0.3.5) ## [0.3.4](https://github.com/knsv/mermaid/tree/0.3.4) (2015-02-15) + [Full Changelog](https://github.com/knsv/mermaid/compare/0.3.3...0.3.4) **Implemented enhancements:** @@ -785,6 +802,7 @@ By doing this clicks and tags are again allowed. - Ignore all files except the license and dist/ folder when installing with Bower. [\#112](https://github.com/knsv/mermaid/pull/112) ([jasonbellamy](https://github.com/jasonbellamy)) ## [0.3.3](https://github.com/knsv/mermaid/tree/0.3.3) (2015-01-25) + [Full Changelog](https://github.com/knsv/mermaid/compare/0.3.2...0.3.3) **Implemented enhancements:** @@ -805,6 +823,7 @@ By doing this clicks and tags are again allowed. - fix html tags in example usage [\#100](https://github.com/knsv/mermaid/pull/100) ([deiwin](https://github.com/deiwin)) ## [0.3.2](https://github.com/knsv/mermaid/tree/0.3.2) (2015-01-11) + [Full Changelog](https://github.com/knsv/mermaid/compare/0.3.1...0.3.2) **Implemented enhancements:** @@ -827,6 +846,7 @@ By doing this clicks and tags are again allowed. - Template change [\#88](https://github.com/knsv/mermaid/pull/88) ([gkchic](https://github.com/gkchic)) ## [0.3.1](https://github.com/knsv/mermaid/tree/0.3.1) (2015-01-05) + [Full Changelog](https://github.com/knsv/mermaid/compare/0.3.0...0.3.1) **Implemented enhancements:** @@ -849,6 +869,7 @@ By doing this clicks and tags are again allowed. - Add apostrophe & 'and' [\#72](https://github.com/knsv/mermaid/pull/72) ([sudodoki](https://github.com/sudodoki)) ## [0.3.0](https://github.com/knsv/mermaid/tree/0.3.0) (2014-12-22) + [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.16...0.3.0) **Implemented enhancements:** @@ -871,6 +892,7 @@ By doing this clicks and tags are again allowed. - Allow special symbols for direction along with acronyms [\#66](https://github.com/knsv/mermaid/pull/66) ([vijay40](https://github.com/vijay40)) ## [0.2.16](https://github.com/knsv/mermaid/tree/0.2.16) (2014-12-15) + [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.15...0.2.16) **Fixed bugs:** @@ -891,11 +913,12 @@ By doing this clicks and tags are again allowed. - 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)) +- 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) + [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.14...0.2.15) **Fixed bugs:** @@ -911,13 +934,15 @@ By doing this clicks and tags are again allowed. **Merged pull requests:** -- Include bower\_components/ to .gitignore [\#33](https://github.com/knsv/mermaid/pull/33) ([serv](https://github.com/serv)) +- 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) + [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.13...0.2.14) ## [0.2.13](https://github.com/knsv/mermaid/tree/0.2.13) (2014-12-03) + [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.10...0.2.13) **Implemented enhancements:** @@ -932,9 +957,11 @@ By doing this clicks and tags are again allowed. - Support unicode chars in labels [\#9](https://github.com/knsv/mermaid/issues/9) ## [0.2.10](https://github.com/knsv/mermaid/tree/0.2.10) (2014-12-01) + [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.9...0.2.10) ## [0.2.9](https://github.com/knsv/mermaid/tree/0.2.9) (2014-12-01) + [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.8...0.2.9) **Closed issues:** @@ -947,9 +974,11 @@ By doing this clicks and tags are again allowed. - Allow unicode chars in labels [\#13](https://github.com/knsv/mermaid/pull/13) ([codebeige](https://github.com/codebeige)) ## [0.2.8](https://github.com/knsv/mermaid/tree/0.2.8) (2014-12-01) + [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.7...0.2.8) ## [0.2.7](https://github.com/knsv/mermaid/tree/0.2.7) (2014-12-01) + [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.6...0.2.7) **Closed issues:** @@ -957,9 +986,11 @@ By doing this clicks and tags are again allowed. - Provide parser as separate module [\#4](https://github.com/knsv/mermaid/issues/4) ## [0.2.6](https://github.com/knsv/mermaid/tree/0.2.6) (2014-11-27) + [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.5...0.2.6) ## [0.2.5](https://github.com/knsv/mermaid/tree/0.2.5) (2014-11-27) + [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.4...0.2.5) **Merged pull requests:** @@ -967,21 +998,27 @@ By doing this clicks and tags are again allowed. - Added new shapes! [\#1](https://github.com/knsv/mermaid/pull/1) ([bjowes](https://github.com/bjowes)) ## [0.2.4](https://github.com/knsv/mermaid/tree/0.2.4) (2014-11-25) + [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.3...0.2.4) ## [0.2.3](https://github.com/knsv/mermaid/tree/0.2.3) (2014-11-24) + [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.2...0.2.3) ## [0.2.2](https://github.com/knsv/mermaid/tree/0.2.2) (2014-11-22) + [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.1...0.2.2) ## [0.2.1](https://github.com/knsv/mermaid/tree/0.2.1) (2014-11-22) + [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.0...0.2.1) ## [0.2.0](https://github.com/knsv/mermaid/tree/0.2.0) (2014-11-22) + [Full Changelog](https://github.com/knsv/mermaid/compare/0.1.1...0.2.0) ## [0.1.1](https://github.com/knsv/mermaid/tree/0.1.1) (2014-11-17) + [Full Changelog](https://github.com/knsv/mermaid/compare/0.1.0...0.1.1) ## [0.1.0](https://github.com/knsv/mermaid/tree/0.1.0) (2014-11-16) diff --git a/src/docs/Configuration.md b/src/docs/Configuration.md index dcb50a5a9..dfa3edc24 100644 --- a/src/docs/Configuration.md +++ b/src/docs/Configuration.md @@ -1,27 +1,20 @@ # Configuration -Configuration is the second half of Mermaid, after deployment. Together Deployment and Configuration constitute the whole of Mermaid. +Configuration is the second half of Mermaid, after deployment. Together Deployment and Configuration constitute the whole of Mermaid. -This section will introduce the different methods of configuring of the behaviors and appearances of Mermaid Diagrams. -The Following are the most commonly used methods, and are all tied to Mermaid [Deployment](./n00b-gettingStarted.md) methods. +This section will introduce the different methods of configuring of the behaviors and appearances of Mermaid Diagrams. +The Following are the most commonly used methods, and are all tied to Mermaid [Deployment](./n00b-gettingStarted.md) methods. ## Configuration Section in the [Live Editor](https://mermaid.live/). - -## The `initialize()` call, for when Mermaid is called via an API, or through a <script> tag. - +## The `initialize()` call, for when Mermaid is called via an API, or through a <script> tag. ## [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. +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. ## Theme Creation: -An application of using Directives to change [Themes](./theming.md). `Theme` is an value within mermaid's configuration that dictates the color scheme for diagrams. +An application of using Directives to change [Themes](./theming.md). `Theme` is an value within mermaid's configuration that dictates the color scheme for diagrams. If you are interested in altering and customizing your Mermaid Diagrams, you will find the methods and values available for [Configuration](./Setup.md) here. It includes themes - - - - - diff --git a/src/docs/README.md b/src/docs/README.md index 6405803c2..e8bba38da 100644 --- a/src/docs/README.md +++ b/src/docs/README.md @@ -192,7 +192,7 @@ To Deploy Mermaid: ```html <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> <script> - mermaid.initialize({ startOnLoad: true }); + mermaid.initialize({ startOnLoad: true }); </script> ``` @@ -202,10 +202,10 @@ To Deploy Mermaid: ## Sibling projects -- [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor) -- [Mermaid CLI](https://github.com/mermaid-js/mermaid-cli) -- [Mermaid Webpack Demo](https://github.com/mermaidjs/mermaid-webpack-demo) -- [Mermaid Parcel Demo](https://github.com/mermaidjs/mermaid-parcel-demo) +- [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor) +- [Mermaid CLI](https://github.com/mermaid-js/mermaid-cli) +- [Mermaid Webpack Demo](https://github.com/mermaidjs/mermaid-webpack-demo) +- [Mermaid Parcel Demo](https://github.com/mermaidjs/mermaid-parcel-demo) ## Request for Assistance @@ -217,8 +217,8 @@ represent the project when answering questions and issues. Together we could continue the work with things like: -- Adding more types of diagrams like mindmaps, ert diagrams, etc. -- Improving existing diagrams +- Adding more types of diagrams like mindmaps, ert diagrams, etc. +- Improving existing diagrams Don't hesitate to contact me if you want to get involved! @@ -267,9 +267,9 @@ The above command generates files into the `dist` folder and publishes them to n ## Related projects -- [Command Line Interface](https://github.com/mermaid-js/mermaid-cli) -- [Live Editor](https://github.com/mermaid-js/mermaid-live-editor) -- [HTTP Server](https://github.com/TomWright/mermaid-server) +- [Command Line Interface](https://github.com/mermaid-js/mermaid-cli) +- [Live Editor](https://github.com/mermaid-js/mermaid-live-editor) +- [HTTP Server](https://github.com/TomWright/mermaid-server) ## Contributors [![Good first issue](https://img.shields.io/github/labels/mermaid-js/mermaid/Good%20first%20issue%21)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Good+first+issue%21%22) [![Contributors](https://img.shields.io/github/contributors/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors) [![Commits](https://img.shields.io/github/commit-activity/m/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors) diff --git a/src/docs/Setup.md b/src/docs/Setup.md index b7ee5e833..e87c9eead 100644 --- a/src/docs/Setup.md +++ b/src/docs/Setup.md @@ -64,12 +64,12 @@ Theme , the CSS style sheet **Notes:** -- Trace: 0 -- Debug: 1 -- Info: 2 -- Warn: 3 -- Error: 4 -- Fatal: 5 (default) +- Trace: 0 +- Debug: 1 +- Info: 2 +- Warn: 3 +- Error: 4 +- Fatal: 5 (default) ## securityLevel @@ -79,13 +79,13 @@ Theme , the CSS style sheet **Notes**: -- **strict**: (**default**) tags in text are encoded, click functionality is disabled -- **loose**: tags in text are allowed, click functionality is enabled -- **antiscript**: html tags in text are allowed, (only script element is removed), click - functionality is enabled -- **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This - prevent any JavaScript from running in the context. This may hinder interactive functionality - of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc. +- **strict**: (**default**) tags in text are encoded, click functionality is disabled +- **loose**: tags in text are allowed, click functionality is enabled +- **antiscript**: html tags in text are allowed, (only script element is removed), click + functionality is enabled +- **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This + prevent any JavaScript from running in the context. This may hinder interactive functionality + of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc. ## startOnLoad @@ -1420,7 +1420,7 @@ function _Default value: At default, will mirror Global Config_ ### Parameters -- `conf` **MermaidConfig** The base currentConfig to use as siteConfig +- `conf` **MermaidConfig** The base currentConfig to use as siteConfig Returns **[object][5]** The siteConfig @@ -1450,7 +1450,7 @@ corresponding siteConfig value. ### Parameters -- `conf` **any** The potential currentConfig +- `conf` **any** The potential currentConfig Returns **any** The currentConfig merged with the sanitized conf @@ -1473,14 +1473,14 @@ $(function () { ### Parameters -- `id` **[string][6]** The id of the element to be rendered -- `text` **[string][6]** The graph definition -- `cb` **function (svgCode: [string][6], bindFunctions: function (element: [Element][7]): void): void** -- `container` **[Element][7]** Selector to element in which a div with the graph temporarily will be - inserted. If one is provided a hidden div will be inserted in the body of the page instead. The - element will be removed when rendering is completed. +- `id` **[string][6]** The id of the element to be rendered +- `text` **[string][6]** The graph definition +- `cb` **function (svgCode: [string][6], bindFunctions: function (element: [Element][7]): void): void** +- `container` **[Element][7]** Selector to element in which a div with the graph temporarily will be + inserted. If one is provided a hidden div will be inserted in the body of the page instead. The + element will be removed when rendering is completed. -Returns **void** +Returns **void** ## getConfig @@ -1507,7 +1507,7 @@ options in-place ### Parameters -- `options` **any** The potential setConfig parameter +- `options` **any** The potential setConfig parameter ## addDirective @@ -1515,7 +1515,7 @@ Pushes in a directive to the configuration ### Parameters -- `directive` **[object][5]** The directive to push in +- `directive` **[object][5]** The directive to push in ## reset @@ -1535,17 +1535,17 @@ Pushes in a directive to the configuration ### Parameters -- `config` (optional, default `siteConfig`) +- `config` (optional, default `siteConfig`) -Returns **void** +Returns **void** ## initialize ### Parameters -- `options` **MermaidConfig** +- `options` **MermaidConfig** -## +## ## mermaidAPI configuration defaults @@ -1610,15 +1610,9 @@ Returns **void** ``` [1]: https://github.com/mermaid-js/mermaid/blob/develop/src/mermaidAPI.js - [2]: Setup.md?id=render - [3]: 8.6.0_docs.md - [4]: #mermaidapi-configuration-defaults - [5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object - [6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String - [7]: https://developer.mozilla.org/docs/Web/API/Element diff --git a/src/docs/Tutorials.md b/src/docs/Tutorials.md index 40b5a307e..f4570d8b5 100644 --- a/src/docs/Tutorials.md +++ b/src/docs/Tutorials.md @@ -1,13 +1,13 @@ # Tutorials -This is list of publicly available Tutorials for using Mermaid.JS . This is intended as a basic introduction for the use of the Live Editor for generating diagrams, and deploying Mermaid.JS through HTML. +This is list of publicly available Tutorials for using Mermaid.JS . This is intended as a basic introduction for the use of the Live Editor for generating diagrams, and deploying Mermaid.JS through HTML. **Note that these tutorials might display an older interface, but the usage of the live-editor will largely be the same.** For most purposes, you can use the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor), to quickly and easily render a diagram. - ## Live-Editor Tutorials + The definitions that can be generated the Live-Editor are also backwards-compatible as of version 8.7.0. [Chris Chinchilla: Hands on - Text-based diagrams with Mermaid](https://www.youtube.com/watch?v=4_LdV1cs2sA) @@ -20,8 +20,8 @@ The definitions that can be generated the Live-Editor are also backwards-compati [Eddie Jaoude: Can you code your diagrams?](https://www.youtube.com/watch?v=9HZzKkAqrX8) - ## Mermaid with HTML + Examples are provided in [Getting Started](n00b-gettingStarted.md) **CodePen Examples:** @@ -32,7 +32,6 @@ https://codepen.io/tdkn/pen/vZxQzd https://codepen.io/janzeteachesit/pen/OWWZKN - ## Mermaid with Text Area https://codepen.io/Ryuno-Ki/pen/LNxwgR @@ -43,7 +42,6 @@ https://codepen.io/Ryuno-Ki/pen/LNxwgR [K8s.dev blog: Improve your documentation with Mermaid.js diagrams](https://www.kubernetes.dev/blog/2021/12/01/improve-your-documentation-with-mermaid.js-diagrams/) - ## Jupyter Integration with mermaid-js Here's an example of Python integration with mermaid-js which uses the mermaid.ink service, that displays the graph in a Jupyter notebook. diff --git a/src/docs/_navbar.md b/src/docs/_navbar.md index 7156cccdb..c77bde3bd 100644 --- a/src/docs/_navbar.md +++ b/src/docs/_navbar.md @@ -1,13 +1,13 @@ -* Getting started +- Getting started - * [Quick start](quickstart.md) - * [Writing more pages](more-pages.md) - * [Custom navbar](custom-navbar.md) - * [Cover page](cover.md) + - [Quick start](quickstart.md) + - [Writing more pages](more-pages.md) + - [Custom navbar](custom-navbar.md) + - [Cover page](cover.md) -* Configuration - * [Configuration](configuration.md) - * [Themes](themes.md) - * [Using plugins](plugins.md) - * [Markdown configuration](markdown.md) - * [Language highlight](language-highlight.md) \ No newline at end of file +- Configuration + - [Configuration](configuration.md) + - [Themes](themes.md) + - [Using plugins](plugins.md) + - [Markdown configuration](markdown.md) + - [Language highlight](language-highlight.md) diff --git a/src/docs/_sidebar.md b/src/docs/_sidebar.md index 0a8b44995..54ef50afb 100644 --- a/src/docs/_sidebar.md +++ b/src/docs/_sidebar.md @@ -5,6 +5,7 @@ - [Syntax and Configuration](n00b-syntaxReference.md) - 📊 Diagram Syntax + - [Flowchart](flowchart.md) - [Sequence Diagram](sequenceDiagram.md) - [Class Diagram](classDiagram.md) @@ -30,6 +31,7 @@ - [Advanced usage](n00b-advanced.md) - 📚 Misc + - [Use-Cases and Integrations](integrations.md) - [FAQ](faq.md) diff --git a/src/docs/accessibility.md b/src/docs/accessibility.md index c9a3bdcd9..387871de4 100644 --- a/src/docs/accessibility.md +++ b/src/docs/accessibility.md @@ -14,8 +14,8 @@ This support for accessibility options is available for all the diagrams/chart t The diagram authors can now add the accessibility options in the diagram definition, using the `accTitle` and `accDescr` keywords, where each keyword is followed by `:` and the string value for title and description like: -- `accTitle: "Your Accessibility Title"` or -- `accDescr: "Your Accessibility Description"` +- `accTitle: "Your Accessibility Title"` or +- `accDescr: "Your Accessibility Description"` **When these two options are defined, they will add a coressponding `<title>` and `<desc>` tag in the SVG.** diff --git a/src/docs/breakingChanges.md b/src/docs/breakingChanges.md index 7b94bf442..41b411df6 100644 --- a/src/docs/breakingChanges.md +++ b/src/docs/breakingChanges.md @@ -27,13 +27,13 @@ mermaid.initialize({ In old versions you needed to reference a CSS file in your HTML: ```html -<link rel="stylesheet" href="mermaid.min.css"> +<link rel="stylesheet" href="mermaid.min.css" /> ``` or ```html -<link rel="stylesheet" href="mermaid.forest.min.css"> +<link rel="stylesheet" href="mermaid.forest.min.css" /> ``` Now it is not needed, and there are no more CSS files in the distribution files. @@ -42,8 +42,8 @@ You just: ```javascript mermaid.initialize({ - theme: 'forest' -}) + theme: 'forest', +}); ``` and it works like a charm because now the CSS is inline with the SVG to allow simpler portability. diff --git a/src/docs/c4c.md b/src/docs/c4c.md index eb870422c..0ab805182 100644 --- a/src/docs/c4c.md +++ b/src/docs/c4c.md @@ -55,11 +55,11 @@ For an example, see the source code demos/index.html 5 types of C4 charts are supported. -- System Context (C4Context) -- Container diagram (C4Container) -- Component diagram (C4Component) -- Dynamic diagram (C4Dynamic) -- Deployment diagram (C4Deployment) +- System Context (C4Context) +- Container diagram (C4Container) +- Component diagram (C4Component) +- Dynamic diagram (C4Dynamic) +- Deployment diagram (C4Deployment) Please refer to the linked document [C4-PlantUML syntax](https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/README.md) for how to write the c4 diagram. @@ -69,79 +69,79 @@ updateElementStyle and UpdateElementStyle are written in the diagram last part. The layout does not use a fully automated layout algorithm. The position of shapes is adjusted by changing the order in which statements are written. So there is no plan to support the following Layout statements. The number of shapes per row and the number of boundaries can be adjusted using UpdateLayoutConfig. -- Layout -- - Lay_U, Lay_Up -- - Lay_D, Lay_Down -- - Lay_L, Lay_Left -- - Lay_R, Lay_Right +- Layout +- - Lay_U, Lay_Up +- - Lay_D, Lay_Down +- - Lay_L, Lay_Left +- - Lay_R, Lay_Right The following unfinished features are not supported in the short term. -- [ ] sprite -- [ ] tags -- [ ] link -- [ ] Legend +- [ ] sprite +- [ ] tags +- [ ] link +- [ ] Legend -- [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 +- [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 -- [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] 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] 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] 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] 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. +- [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). +- [ ] 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. diff --git a/src/docs/classDiagram.md b/src/docs/classDiagram.md index 8bb8f2c40..4006a497c 100644 --- a/src/docs/classDiagram.md +++ b/src/docs/classDiagram.md @@ -100,7 +100,7 @@ class BankAccount{ #### Return Type -Optionally you can end a method/function definition with the data type that will be returned (note: there must be a space between the final `)` and the return type). An example: +Optionally you can end a method/function definition with the data type that will be returned (note: there must be a space between the final `)` and the return type). An example: ```mermaid-example classDiagram @@ -146,13 +146,14 @@ To describe the visibility (or encapsulation) of an attribute or method/function - `~` Package/Internal > _note_ you can also include additional _classifiers_ to a method definition by adding the following notation to the _end_ of the method, i.e.: after the `()`: +> > - `*` Abstract e.g.: `someAbstractMethod()*` > - `$` Static e.g.: `someStaticMethod()$` > _note_ you can also include additional _classifiers_ to a field definition by adding the following notation to the end of its name: +> > - `$` Static e.g.: `String someField$` - ## Defining Relationship A relationship is a general term covering the specific types of logical connections found on class and object diagrams. @@ -234,7 +235,6 @@ Here is the syntax: Where `Relation Type` can be one of: - | Type | Description | | ---- | ----------- | | <\| | Inheritance | @@ -282,7 +282,7 @@ classDiagram ## Annotations on classes -It is possible to annotate classes with markers to provide additional metadata about the class. This can give a clearer indication about its nature. Some common annotations include: +It is possible to annotate classes with markers to provide additional metadata about the class. This can give a clearer indication about its nature. Some common annotations include: - `<<Interface>>` To represent an Interface class - `<<Abstract>>` To represent an abstract class @@ -355,7 +355,7 @@ classDiagram } Student "1" --o "1" IdCard : carries Student "1" --o "1" Bike : rides - ``` +``` ## Interaction @@ -368,6 +368,7 @@ 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 - _reference_ is either the url link, or the function name for callback. @@ -398,9 +399,9 @@ click Shape2 call callbackFunction() "This is a tooltip for a callback" ```html <script> - var callbackFunction = function () { - alert('A callback was triggered'); - }; + var callbackFunction = function () { + alert('A callback was triggered'); + }; </script> ``` @@ -423,39 +424,19 @@ Beginner's tip—a full example using interactive links in an HTML page: ```html <body> <div class="mermaid"> - classDiagram - Animal <|-- Duck - Animal <|-- Fish - Animal <|-- Zebra - Animal : +int age - Animal : +String gender - Animal: +isMammal() - Animal: +mate() - class Duck{ - +String beakColor - +swim() - +quack() - } - class Fish{ - -int sizeInFeet - -canEat() - } - class Zebra{ - +bool is_wild - +run() - } - - callback Duck callback "Tooltip" - link Zebra "https://www.github.com" "This is a link" + classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : + +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() + +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() } callback + Duck callback "Tooltip" link Zebra "https://www.github.com" "This is a link" </div> <script> var callback = function () { - alert('A callback was triggered'); + alert('A callback was triggered'); }; var config = { - startOnLoad: true, - securityLevel: 'loose' + startOnLoad: true, + securityLevel: 'loose', }; mermaid.initialize(config); </script> @@ -470,11 +451,11 @@ It is possible to apply specific styles such as a thicker border or a different ```html <style> - .cssClass > rect{ - fill:#FF0000; - stroke:#FFFF00; - stroke-width:4px; - } + .cssClass > rect { + fill: #ff0000; + stroke: #ffff00; + stroke-width: 4px; + } </style> ``` @@ -509,7 +490,7 @@ classDiagram ?> cssClasses cannot be added using this shorthand method at the same time as a relation statement. -?> Due to limitations with existing markup for class diagrams, it is not currently possible to define css classes within the diagram itself. ***Coming soon!*** +?> Due to limitations with existing markup for class diagrams, it is not currently possible to define css classes within the diagram itself. **_Coming soon!_** ### Default Styles @@ -531,91 +512,91 @@ The main styling of the class diagram is done with a preset number of css classe ```scss body { - background: white; + background: white; } g.classGroup text { - fill: $nodeBorder; - stroke: none; - font-family: 'trebuchet ms', verdana, arial; - font-family: var(--mermaid-font-family); - font-size: 10px; + fill: $nodeBorder; + stroke: none; + font-family: 'trebuchet ms', verdana, arial; + font-family: var(--mermaid-font-family); + font-size: 10px; - .title { - font-weight: bolder; - } + .title { + font-weight: bolder; + } } g.classGroup rect { - fill: $nodeBkg; - stroke: $nodeBorder; + fill: $nodeBkg; + stroke: $nodeBorder; } g.classGroup line { - stroke: $nodeBorder; - stroke-width: 1; + stroke: $nodeBorder; + stroke-width: 1; } .classLabel .box { - stroke: none; - stroke-width: 0; - fill: $nodeBkg; - opacity: 0.5; + stroke: none; + stroke-width: 0; + fill: $nodeBkg; + opacity: 0.5; } .classLabel .label { - fill: $nodeBorder; - font-size: 10px; + fill: $nodeBorder; + font-size: 10px; } .relation { - stroke: $nodeBorder; - stroke-width: 1; - fill: none; + stroke: $nodeBorder; + stroke-width: 1; + fill: none; } @mixin composition { - fill: $nodeBorder; - stroke: $nodeBorder; - stroke-width: 1; + fill: $nodeBorder; + stroke: $nodeBorder; + stroke-width: 1; } #compositionStart { - @include composition; + @include composition; } #compositionEnd { - @include composition; + @include composition; } @mixin aggregation { - fill: $nodeBkg; - stroke: $nodeBorder; - stroke-width: 1; + fill: $nodeBkg; + stroke: $nodeBorder; + stroke-width: 1; } #aggregationStart { - @include aggregation; + @include aggregation; } #aggregationEnd { - @include aggregation; + @include aggregation; } #dependencyStart { - @include composition; + @include composition; } #dependencyEnd { - @include composition; + @include composition; } #extensionStart { - @include composition; + @include composition; } #extensionEnd { - @include composition; + @include composition; } ``` diff --git a/src/docs/developer-docs/configuration.md b/src/docs/developer-docs/configuration.md index 300df178d..d248944dd 100644 --- a/src/docs/developer-docs/configuration.md +++ b/src/docs/developer-docs/configuration.md @@ -2,9 +2,9 @@ When mermaid starts, configuration is extracted to determine a configuration to be used for a diagram. There are 3 sources for configuration: -* The default configuration -* Overrides at the site level are set by the initialize call, and will be applied to all diagrams in the site/app. The term for this is the **siteConfig**. -* Directives - diagram authors can update select configuration parameters directly in the diagram code via directives. These are applied to the render config. +- The default configuration +- Overrides at the site level are set by the initialize call, and will be applied to all diagrams in the site/app. The term for this is the **siteConfig**. +- Directives - diagram authors can update select configuration parameters directly in the diagram code via directives. These are applied to the render config. **The render config** is configuration that is used when rendering by applying these configurations. diff --git a/src/docs/development.md b/src/docs/development.md index 7b4888537..96da46c11 100644 --- a/src/docs/development.md +++ b/src/docs/development.md @@ -24,9 +24,9 @@ This means that **you should branch off your pull request from develop** and dir We make all changes via Pull Requests. As we have many Pull Requests from developers new to mermaid, we have put in place a process, wherein _knsv, Knut Sveidqvist_ is the primary reviewer of changes and merging pull requests. The process is as follows: -- 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 `src/docs` folder; you can submit them via direct commits) +- 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 `src/docs` folder; you can submit them via direct commits) When you commit code, create a branch with the following naming convention: @@ -82,8 +82,8 @@ This is what a rendering test looks like: ```js it('should render forks and joins', () => { - imgSnapshotTest( - ` + imgSnapshotTest( + ` stateDiagram state fork_state <<fork>> [*] --> fork_state @@ -96,9 +96,9 @@ it('should render forks and joins', () => { join_state --> State4 State4 --> [*] `, - { logLevel: 0 } - ); - cy.get('svg'); + { logLevel: 0 } + ); + cy.get('svg'); }); ``` diff --git a/src/docs/diagrams-and-syntax-and-examples/flowchart.md b/src/docs/diagrams-and-syntax-and-examples/flowchart.md index a33927803..972135db4 100644 --- a/src/docs/diagrams-and-syntax-and-examples/flowchart.md +++ b/src/docs/diagrams-and-syntax-and-examples/flowchart.md @@ -25,20 +25,19 @@ graph LR Possible FlowChart orientations are: -* TB - top to bottom -* TD - top-down (same as top to bottom) -* BT - bottom to top -* RL - right to left -* LR - left to right - +- TB - top to bottom +- TD - top-down (same as top to bottom) +- BT - bottom to top +- RL - right to left +- LR - left to right ## Flowcharts This renders a flowchart that allows for features such as: more arrow types, multi directional arrows, and linking to and from subgraphs. -Apart from the graph type, the syntax is the same. This is currently experimental. When the beta period is over, both the graph and flowchart keywords will render in this new way. At this point it is OK to start beta testing flowcharts. +Apart from the graph type, the syntax is the same. This is currently experimental. When the beta period is over, both the graph and flowchart keywords will render in this new way. At this point it is OK to start beta testing flowcharts. -> **Important note** Do not type the word "end" as a Flowchart node. Capitalize all or any one the letters to keep the flowchart from breaking, i.e, "End" or "END". Or you can apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897).** +> **Important note** Do not type the word "end" as a Flowchart node. Capitalize all or any one the letters to keep the flowchart from breaking, i.e, "End" or "END". Or you can apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897).\*\* ## Nodes and shapes @@ -105,7 +104,8 @@ graph LR 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.* + +Currently it is only possible to render the shape above, and not its mirror. _This might change with future releases._ ### A node (rhombus) @@ -127,6 +127,7 @@ graph LR graph TD id1[/This is the text in the box/] ``` + ### Parallelogram alt ```mermaid-example @@ -140,6 +141,7 @@ graph TD graph TD A[/Christmas\] ``` + ### Trapezoid alt ```mermaid-example @@ -224,23 +226,28 @@ graph LR ### Chaining of links It is possible to declare many links on the same line as per below: + ```mermaid-example graph LR A -- text --> B -- text2 --> C ``` It is also possible to declare multiple nodes links in the same line as per below: + ```mermaid-example graph LR a --> b & c--> d ``` You can then describe dependencies in a very expressive way. Like the one-liner below: + ```mermaid-example graph TB A & B--> C & D ``` + If you describe the same diagram using the the basic syntax, it will take four lines: + ```mmd graph TB A --> C @@ -248,6 +255,7 @@ graph TB B --> C B --> D ``` + A word of warning, one could go overboard with this, making the graph harder to read in markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little. This goes for expressive syntaxes as well. @@ -312,12 +320,12 @@ graph TD For dotted or thick links, the characters to add are equals signs or dots, as summed up in the following table: -| Length | 1 | 2 | 3 | -|-------------------|:------:|:-------:|:--------:| -| Normal | `---` | `----` | `-----` | -| Normal with arrow | `-->` | `--->` | `---->` | -| Thick | `===` | `====` | `=====` | -| Thick with arrow | `==>` | `===>` | `====>` | +| Length | 1 | 2 | 3 | +| ----------------- | :----: | :-----: | :------: | +| Normal | `---` | `----` | `-----` | +| Normal with arrow | `-->` | `--->` | `---->` | +| Thick | `===` | `====` | `=====` | +| Thick with arrow | `==>` | `===>` | `====>` | | Dotted | `-.-` | `-..-` | `-...-` | | Dotted with arrow | `-.->` | `-..->` | `-...->` | @@ -361,7 +369,7 @@ graph TB subgraph three c1-->c2 end - ``` +``` You can also set an explicit id for the subgraph: @@ -371,7 +379,7 @@ graph TB subgraph ide1 [one] a1-->a2 end - ``` +``` ## Flowcharts @@ -392,7 +400,7 @@ flowchart TB one --> two three --> two two --> c2 - ``` +``` ## Interaction @@ -403,8 +411,8 @@ click nodeId callback click nodeId call callback() ``` -* nodeId is the id of the node -* `callback` is the name of a JavaScript function defined on the page displaying the graph. The function will be called with the nodeId as an incoming parameter. +- nodeId is the id of the node +- `callback` is the name of a JavaScript function defined on the page displaying the graph. The function will be called with the nodeId as an incoming parameter. ```html <script> @@ -428,11 +436,13 @@ graph LR; 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/). Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported): + ```mermaid-example graph LR; A-->B; @@ -450,28 +460,23 @@ Beginner's tip—here's a full example of using interactive links in HTML: ```html <body> <div class="mermaid"> - graph LR; - A-->B; - B-->C; - C-->D; - click A callback "Tooltip" - click B "https://www.github.com" "This is a link" - click C call callback() "Tooltip" - click D href "https://www.github.com" "This is a link" + graph LR; A-->B; B-->C; C-->D; click A callback "Tooltip" click B "https://www.github.com" "This + is a link" click C call callback() "Tooltip" click D href "https://www.github.com" "This is a + link" </div> <script> var callback = function () { - alert('A callback was triggered'); + alert('A callback was triggered'); }; var config = { - startOnLoad: true, - flowchart: { - useMaxWidth: true, - htmlLabels: true, - curve: 'cardinal' - }, - securityLevel: 'loose' + startOnLoad: true, + flowchart: { + useMaxWidth: true, + htmlLabels: true, + curve: 'cardinal', + }, + securityLevel: 'loose', }; mermaid.initialize(config); </script> @@ -480,7 +485,7 @@ Beginner's tip—here's a full example of using interactive links in HTML: ### Comments -Comments can be entered within a flow diagram, 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 until the next newline will be treated as a comment, including all punctuation and any flow syntax. +Comments can be entered within a flow diagram, 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 until the next newline will be treated as a comment, including all punctuation and any flow syntax. ```mmd graph LR @@ -532,7 +537,6 @@ graph LR 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. @@ -563,7 +567,6 @@ graph LR classDef someclass fill:#f96; ``` - ### Css classes It is also possible to predefine classes in css styles that can be applied from the graph definition: @@ -572,9 +575,9 @@ It is also possible to predefine classes in css styles that can be applied from ```css .cssClass > rect { - fill: #FF0000; - stroke: #FFFF00; - stroke-width: 4px; + fill: #ff0000; + stroke: #ffff00; + stroke-width: 4px; } ``` @@ -587,7 +590,6 @@ graph LR; 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. @@ -596,10 +598,9 @@ If a class is named `default` it will be assigned to all nodes that do not have classDef default fill:#f9f,stroke:#333,stroke-width:4px; ``` - ## Basic support for fontawesome -It is possible to add icons from fontawesome. These are accessed via the syntax fa:#icon-class-name#. +It is possible to add icons from fontawesome. These are accessed via the syntax fa:#icon-class-name#. ```mermaid-example graph TD @@ -609,12 +610,11 @@ graph TD 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. +- 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. -* A single space is allowed between vertices and the link, however there should not be any space between a vertex and its text, or a link and its text. The old syntax of graph declarations will also work, so this new feature is optional and is introduced to improve readability. +- A single space is allowed between vertices and the link, however there should not be any space between a vertex and its text, or a link and its text. The old syntax of graph declarations will also work, so this new feature is optional and is introduced to improve readability. Below is an example of the new way to declare graph edges. This is valid alongside any old-style declarations of graph edges. @@ -626,7 +626,6 @@ graph LR C -->|Two| E[Result two] ``` - ## Configuration... Is it possible to adjust the width of the rendered flowchart. @@ -636,6 +635,6 @@ In Javascript config parameters can be set by using `mermaid.flowchartConfig`: ```javascript mermaid.flowchartConfig = { - width: '100%' -} + width: '100%', +}; ``` diff --git a/src/docs/directives.md b/src/docs/directives.md index b348026b2..fdc0b199e 100644 --- a/src/docs/directives.md +++ b/src/docs/directives.md @@ -1,38 +1,45 @@ # Directives ## Directives + Directives gives a diagram author the capability to alter the appearance of a diagram before rendering by changing the applied configuration. The significance of having directives is that you have them available while writing the diagram, and can modify the default global and diagram specific configurations. So, directives are applied on top of the default configurations. The beauty of directives is that you can use them to alter configuration settings for a specific diagram, i.e. at an individual level. -While directives allow you to change most of the default configuration settings, there are some that are not available, that too for security reasons. Also, you do have the *option to define the set of configurations* that you would allow to be available to the diagram author for overriding with help of directives. +While directives allow you to change most of the default configuration settings, there are some that are not available, that too for security reasons. Also, you do have the _option to define the set of configurations_ that you would allow to be available to the diagram author for overriding with help of directives. ## Types of Directives options + 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: - - theme - - fontFamily - - logLevel - - securityLevel - - startOnLoad - - secure +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: -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. +- theme +- fontFamily +- logLevel +- securityLevel +- 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. **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 ``` - ## Declaring directives + +## Declaring directives + Now that we have defined the types of configurations that are available, we can learn how to declare directives. A directive always starts and end `%%` sign with directive text in between, like `%% {directive_text} %%`. -Here the structure of a directive text is like a nested key-value pair map or a JSON object with root being *init*. Where all the general configurations are defined in the top level, and all the diagram specific configurations are defined one level deeper with diagram type as key/root for that section. +Here the structure of a directive text is like a nested key-value pair map or a JSON object with root being _init_. Where all the general configurations are defined in the top level, and all the diagram specific configurations are defined one level deeper with diagram type as key/root for that section. Following code snippet shows the structure of a directive: + ``` %%{ init: { @@ -49,11 +56,15 @@ Following code snippet shows the structure of a directive: } }%% ``` + You can also define the directives in a single line, like this: + ``` %%{init: { **insert argument here**}}%% ``` + For example, the following code snippet: + ``` %%{init: { "sequence": { "mirrorActors":false }}}%% ``` @@ -63,6 +74,7 @@ The json object that is passed as {**argument** } must be valid key value pairs Valid Key Value pairs can be found in config. Example with a simple graph: + ```mermaid-example %%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%% graph LR @@ -85,26 +97,28 @@ parsing the above generates a single `%%init%%` JSON object below, combining the { logLevel: 'fatal', theme: 'dark', - startOnLoad: true + startOnLoad: true, } ``` This will then be sent to `mermaid.initialize(...)` for rendering. ## Directive Examples + More directive examples for diagram specific configuration overrides Now that the concept of directives has been explained, Let us see some more examples for directives usage: ### Changing Theme via directive + The following code snippet changes theme to forest: - -```%%{init: { "theme": "forest" } }%%``` +`%%{init: { "theme": "forest" } }%%` Possible themes value are: `default`,`base`, `dark`, `forest` and `neutral`. Default Value is `default`. Example: + ```mermaid-example %%{init: { "theme": "forest" } }%% graph TD @@ -118,12 +132,13 @@ A --> C[End] ``` ### Changing fontFamily via directive + The following code snippet changes theme to forest: - -```%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%``` +`%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%` Example: + ```mermaid-example %%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%% graph TD @@ -137,21 +152,23 @@ A --> C[End] ``` ### Changing logLevel via directive + The following code snippet changes theme to forest: - -```%%{init: { "logLevel": 2 } }%%``` +`%%{init: { "logLevel": 2 } }%%` Possible logLevel values are: -- `1` for *debug*, -- `2` for *info* -- `3` for *warn* -- `4` for *error* -- `5` for *only fatal errors* + +- `1` for _debug_, +- `2` for _info_ +- `3` for _warn_ +- `4` for _error_ +- `5` for _only fatal errors_ Default Value is `5`. Example: + ```mermaid-example %%{init: { "logLevel": 2 } }%% graph TD @@ -164,19 +181,20 @@ A --> C[End] ``` ### Changing flowchart config via directive + Some common flowchart configurations are: -- *htmlLabels*: true/false -- *curve*: linear/curve -- *diagramPadding*: number -- *useMaxWidth*: number + +- _htmlLabels_: true/false +- _curve_: linear/curve +- _diagramPadding_: number +- _useMaxWidth_: number For complete list of flowchart configurations, see [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 all diagram specific configurations updated in the docs* +_Soon we plan to publish a complete list all diagram specific configurations updated in the docs_ The following code snippet changes flowchart config: - -```%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%``` +`%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%` Here were are overriding only the flowchart config, and not the general config, where HtmlLabels is set to true and curve is set to linear. @@ -190,19 +208,22 @@ A --> C[End] C end ``` -### Changing Sequence diagram config via directive -Some common sequence configurations are: -- *width*: number -- *height*: number -- *messageAlign*: left, center, right -- *mirrorActors*: boolean -- *useMaxWidth*: boolean -- *rightAngles*: boolean -- *showSequenceNumbers*: boolean -- *wrap*: boolean -For complete list of sequence diagram configurations, see *defaultConfig.js* in the source code. -*Soon we plan to publish a complete list all diagram specific configurations updated in the docs* +### Changing Sequence diagram config via directive + +Some common sequence configurations are: + +- _width_: number +- _height_: number +- _messageAlign_: left, center, right +- _mirrorActors_: boolean +- _useMaxWidth_: boolean +- _rightAngles_: boolean +- _showSequenceNumbers_: boolean +- _wrap_: boolean + +For complete list of sequence diagram configurations, see _defaultConfig.js_ in the source code. +_Soon we plan to publish a complete list all diagram specific configurations updated in the docs_ So, `wrap` by default has a value of `false` for sequence diagrams. @@ -221,8 +242,7 @@ Now let us enable wrap for sequence diagrams. The following code snippet changes sequence diagram config for `wrap` to `true`: - -```%%{init: { "sequence": { "wrap": true} } }%%``` +`%%{init: { "sequence": { "wrap": true} } }%%` Using in the diagram above, the wrap will be enabled. @@ -234,7 +254,3 @@ Bob->Alice: Fine, How did you mother like the book I suggested? And did you catc Alice->Bob: Good. Bob->Alice: Cool ``` - - - - diff --git a/src/docs/entityRelationshipDiagram.md b/src/docs/entityRelationshipDiagram.md index b2c005c9b..341c9147c 100644 --- a/src/docs/entityRelationshipDiagram.md +++ b/src/docs/entityRelationshipDiagram.md @@ -53,10 +53,10 @@ Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to Where: -- `first-entity` is the name of an entity. Names must begin with an alphabetic character and may also contain digits, hyphens, and underscores. -- `relationship` describes the way that both entities inter-relate. See below. -- `second-entity` is the name of the other entity. -- `relationship-label` describes the relationship from the perspective of the first entity. +- `first-entity` is the name of an entity. Names must begin with an alphabetic character and may also contain digits, hyphens, and underscores. +- `relationship` describes the way that both entities inter-relate. See below. +- `second-entity` is the name of the other entity. +- `relationship-label` describes the relationship from the perspective of the first entity. For example: @@ -72,9 +72,9 @@ Only the `first-entity` part of a statement is mandatory. This makes it possible The `relationship` part of each statement can be broken down into three sub-components: -- the cardinality of the first entity with respect to the second, -- whether the relationship confers identity on a 'child' entity -- the cardinality of the second entity with respect to the first +- the cardinality of the first entity with respect to the second, +- whether the relationship confers identity on a 'child' entity +- the cardinality of the second entity with respect to the first Cardinality is a property that describes how many elements of another entity can be related to the entity in question. In the above example a `PROPERTY` can have one or more `ROOM` instances associated to it, whereas a `ROOM` can only be associated with one `PROPERTY`. In each cardinality marker there are two characters. The outermost character represents a maximum value, and the innermost character represents a minimum value. The table below summarises possible cardinalities. @@ -159,8 +159,8 @@ erDiagram ### Other Things -- If you want the relationship label to be more than one word, you must use double quotes around the phrase -- If you don't want a label at all on a relationship, you must use an empty double-quoted string +- If you want the relationship label to be more than one word, you must use double quotes around the phrase +- If you don't want a label at all on a relationship, you must use an empty double-quoted string ## Styling diff --git a/src/docs/examples.md b/src/docs/examples.md index 0295a2e50..d22efc407 100644 --- a/src/docs/examples.md +++ b/src/docs/examples.md @@ -13,12 +13,14 @@ 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 "FAMILY" : 3 "NOSE" : 45 ``` + ## Basic sequence diagram ```mermaid-example @@ -43,7 +45,6 @@ graph LR C --> D ``` - ## Larger flowchart with some styling ```mermaid-example @@ -70,7 +71,6 @@ graph TB class di orange ``` - ## SequenceDiagram: Loops, alt and opt ```mermaid-example @@ -89,7 +89,6 @@ sequenceDiagram end ``` - ## SequenceDiagram: Message to self in loop ```mermaid-example @@ -141,6 +140,7 @@ sequenceDiagram ``` ## A commit flow diagram. + ```mermaid gitGraph: commit "Ashish" diff --git a/src/docs/flowchart.md b/src/docs/flowchart.md index 753c9f1eb..cab696c3d 100644 --- a/src/docs/flowchart.md +++ b/src/docs/flowchart.md @@ -48,11 +48,11 @@ flowchart LR Possible FlowChart orientations are: -- TB - top to bottom -- TD - top-down/ same as top to bottom -- BT - bottom to top -- RL - right to left -- LR - left to right +- TB - top to bottom +- TD - top-down/ same as top to bottom +- BT - bottom to top +- RL - right to left +- LR - left to right ## Node shapes @@ -433,16 +433,16 @@ click nodeId callback click nodeId call callback() ``` -- nodeId is the id of the node -- callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the nodeId as parameter. +- nodeId is the id of the node +- callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the nodeId as parameter. Examples of tooltip usage below: ```html <script> - var callback = function () { - alert('A callback was triggered'); - }; + var callback = function () { + alert('A callback was triggered'); + }; </script> ``` @@ -481,23 +481,23 @@ Beginner's tip—a full example using interactive links in a html context: ```html <body> - <div class="mermaid"> - flowchart LR A-->B B-->C C-->D click A callback "Tooltip" click B "https://www.github.com" - "This is a link" click C call callback() "Tooltip" click D href "https://www.github.com" - "This is a link" - </div> + <div class="mermaid"> + flowchart LR A-->B B-->C C-->D click A callback "Tooltip" click B "https://www.github.com" "This + is a link" click C call callback() "Tooltip" click D href "https://www.github.com" "This is a + link" + </div> - <script> - var callback = function () { - alert('A callback was triggered'); - }; - var config = { - startOnLoad: true, - flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' }, - securityLevel: 'loose', - }; - mermaid.initialize(config); - </script> + <script> + var callback = function () { + alert('A callback was triggered'); + }; + var config = { + startOnLoad: true, + flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' }, + securityLevel: 'loose', + }; + mermaid.initialize(config); + </script> </body> ``` @@ -592,11 +592,11 @@ below: ```html <style> - .cssClass > rect { - fill: #ff0000; - stroke: #ffff00; - stroke-width: 4px; - } + .cssClass > rect { + fill: #ff0000; + stroke: #ffff00; + stroke-width: 4px; + } </style> ``` @@ -635,9 +635,9 @@ flowchart TD ## 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. +- 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. -- A single space is allowed between vertices and the link. However there should not be any space between a vertex and its text and a link and its text. The old syntax of graph declaration will also work and hence this new feature is optional and is introduced to improve readability. +- A single space is allowed between vertices and the link. However there should not be any space between a vertex and its text and a link and its text. The old syntax of graph declaration will also work and hence this new feature is optional and is introduced to improve readability. Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges. diff --git a/src/docs/gantt.md b/src/docs/gantt.md index 0207412c0..6a5d10e04 100644 --- a/src/docs/gantt.md +++ b/src/docs/gantt.md @@ -2,18 +2,17 @@ > A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule and the amount of time it would take for any one project to finish. Gantt charts illustrate number of days between the start and finish dates of the terminal elements and summary elements of a project. - ## A note to users - Gantt Charts will record each scheduled task as one continuous bar that extends from the left to the right. The x axis represents time and the y records the different tasks and the order in which they are to be completed. +## A note to users +Gantt Charts will record each scheduled task as one continuous bar that extends from the left to the right. The x axis represents time and the y records the different tasks and the order in which they are to be completed. - It is important to remember that when a date, day, or collection of dates specific to a task are "excluded", the Gantt Chart will accommodate those changes by extending an equal number of days, towards the right, not by creating a gap inside the task. - As shown here ![](./img/Gantt-excluded-days-within.png) +It is important to remember that when a date, day, or collection of dates specific to a task are "excluded", the Gantt Chart will accommodate those changes by extending an equal number of days, towards the right, not by creating a gap inside the task. +As shown here ![](./img/Gantt-excluded-days-within.png) +However, if the excluded dates are between two tasks that are set to start consecutively, the excluded dates will be skipped graphically and left blank, and the following task will begin after the end of the excluded dates. +As shown here ![](./img/Gantt-long-weekend-look.png) - However, if the excluded dates are between two tasks that are set to start consecutively, the excluded dates will be skipped graphically and left blank, and the following task will begin after the end of the excluded dates. - As shown here ![](./img/Gantt-long-weekend-look.png) - - A Gantt chart is useful for tracking the amount of time it would take before a project is finished, but it can also be used to graphically represent "non-working days", with a few tweaks. +A Gantt chart is useful for tracking the amount of time it would take before a project is finished, but it can also be used to graphically represent "non-working days", with a few tweaks. Mermaid can render Gantt diagrams as SVG, PNG or a MarkDown link that can be pasted into docs. @@ -75,37 +74,35 @@ It is possible to set multiple dependencies separated by space: ### Title -The `title` is an *optional* string to be displayed at the top of the Gantt chart to describe the chart as a whole. - +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 You can divide the chart into various sections, for example to separate different parts of a project like development and documentation. -To do so, start a line with the `section` keyword and give it a name. (Note that unlike with the [title for the entire chart](#title), this name is *required*. +To do so, start a line with the `section` keyword and give it a name. (Note that unlike with the [title for the entire chart](#title), this name is _required_. ### Milestones -You can add milestones to the diagrams. Milestones differ from tasks as they represent a single instant in time and are identified by the keyword `milestone`. Below is an example on how to use milestones. As you may notice, the exact location of the milestone is determined by the initial date for the milestone and the "duration" of the task this way: *initial date*+*duration*/2. +You can add milestones to the diagrams. Milestones differ from tasks as they represent a single instant in time and are identified by the keyword `milestone`. Below is an example on how to use milestones. As you may notice, the exact location of the milestone is determined by the initial date for the milestone and the "duration" of the task this way: _initial date_+_duration_/2. ```mermaid-example -gantt +gantt dateFormat HH:mm axisFormat %H:%M Initial milestone : milestone, m1, 17:49,2min taska2 : 10min -taska3 : 5min +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`. ### Input date format -The default input date format is `YYYY-MM-DD`. You can define your custom ``dateFormat``. +The default input date format is `YYYY-MM-DD`. You can define your custom `dateFormat`. ``` dateFormat YYYY-MM-DD @@ -140,7 +137,7 @@ More info in: https://momentjs.com/docs/#/parsing/string-format/ ### Output date format on the axis -The default output date format is YYYY-MM-DD. You can define your custom ``axisFormat``, like `2020-Q1` for the first quarter of the year 2020. +The default output date format is YYYY-MM-DD. You can define your custom `axisFormat`, like `2020-Q1` for the first quarter of the year 2020. ``` axisFormat %Y-%m-%d @@ -201,63 +198,61 @@ Styling of the a gantt diagram is done by defining a number of css classes. Duri ### Classes used -Class | Description ---- | --- -grid.tick | Styling for the Grid Lines -grid.path | Styling for the Grid's borders -.taskText | Task Text Styling -.taskTextOutsideRight | Styling for Task Text that exceeds the activity bar towards the right. -.taskTextOutsideLeft | Styling for Task Text that exceeds the activity bar, towards the left. -todayMarker | Toggle and Styling for the "Today Marker" - +| Class | Description | +| --------------------- | ---------------------------------------------------------------------- | +| grid.tick | Styling for the Grid Lines | +| grid.path | Styling for the Grid's borders | +| .taskText | Task Text Styling | +| .taskTextOutsideRight | Styling for Task Text that exceeds the activity bar towards the right. | +| .taskTextOutsideLeft | Styling for Task Text that exceeds the activity bar, towards the left. | +| todayMarker | Toggle and Styling for the "Today Marker" | ### Sample stylesheet - ```css .grid .tick { - stroke: lightgrey; - opacity: 0.3; - shape-rendering: crispEdges; + stroke: lightgrey; + opacity: 0.3; + shape-rendering: crispEdges; } .grid path { - stroke-width: 0; + stroke-width: 0; } #tag { - color: white; - background: #FA283D; - width: 150px; - position: absolute; - display: none; - padding:3px 6px; - margin-left: -80px; - font-size: 11px; + color: white; + background: #fa283d; + width: 150px; + position: absolute; + display: none; + padding: 3px 6px; + margin-left: -80px; + font-size: 11px; } #tag:before { - border: solid transparent; - content: ' '; - height: 0; - left: 50%; - margin-left: -5px; - position: absolute; - width: 0; - border-width: 10px; - border-bottom-color: #FA283D; - top: -20px; + border: solid transparent; + content: ' '; + height: 0; + left: 50%; + margin-left: -5px; + position: absolute; + width: 0; + border-width: 10px; + border-bottom-color: #fa283d; + top: -20px; } .taskText { - fill:white; - text-anchor:middle; + fill: white; + text-anchor: middle; } .taskTextOutsideRight { - fill:black; - text-anchor:start; + fill: black; + text-anchor: start; } .taskTextOutsideLeft { - fill:black; - text-anchor:end; + fill: black; + text-anchor: end; } ``` @@ -286,20 +281,20 @@ mermaid.ganttConfig can be set to a JSON string with config parameters or the co ```javascript mermaid.ganttConfig = { - titleTopMargin:25, - barHeight:20, - barGap:4, - topPadding:75, - sidePadding:75 -} + titleTopMargin: 25, + barHeight: 20, + barGap: 4, + topPadding: 75, + sidePadding: 75, +}; ``` ### Possible configuration params: -Param | Description | Default value ---- | --- | --- -mirrorActor|Turns on/off the rendering of actors below the diagram as well as above it|false -bottomMarginAdj|Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists.|1 +| Param | Description | Default value | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | +| mirrorActor | Turns on/off the rendering of actors below the diagram as well as above it | false | +| bottomMarginAdj | Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists. | 1 | ## Interaction @@ -310,36 +305,30 @@ click taskId call callback(arguments) click taskId href URL ``` -* taskId is the id of the task -* callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the taskId as the parameter if no other arguments are specified. +- taskId is the id of the task +- callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the taskId as the parameter if no other arguments are specified. Beginner's tip—a full example using interactive links in an html context: + ```html <body> <div class="mermaid"> - gantt - dateFormat YYYY-MM-DD - - section Clickable - Visit mermaidjs :active, cl1, 2014-01-07, 3d - Print arguments :cl2, after cl1, 3d - Print task :cl3, after cl2, 3d - - click cl1 href "https://mermaidjs.github.io/" - click cl2 call printArguments("test1", "test2", test3) - click cl3 call printTask() + gantt dateFormat YYYY-MM-DD section Clickable Visit mermaidjs :active, cl1, 2014-01-07, 3d Print + arguments :cl2, after cl1, 3d Print task :cl3, after cl2, 3d click cl1 href + "https://mermaidjs.github.io/" click cl2 call printArguments("test1", "test2", test3) click cl3 + call printTask() </div> <script> - var printArguments = function(arg1, arg2, arg3) { + var printArguments = function (arg1, arg2, arg3) { alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3); - } - var printTask = function(taskId) { + }; + var printTask = function (taskId) { alert('taskId: ' + taskId); - } + }; var config = { - startOnLoad:true, - securityLevel:'loose', + startOnLoad: true, + securityLevel: 'loose', }; mermaid.initialize(config); </script> diff --git a/src/docs/gitgraph.md b/src/docs/gitgraph.md index dac6ca8a5..f82b88ca1 100644 --- a/src/docs/gitgraph.md +++ b/src/docs/gitgraph.md @@ -22,10 +22,10 @@ Mermaid can render Git diagrams In Mermaid, we support the basic git operations like: -- _commit_ : Representing a new commit on the current branch. -- _branch_ : To create & switch to a new branch, setting it as the current branch. -- _checkout_ : To checking out an existing branch and setting it as the current branch. -- _merge_ : To merge an existing branch onto the current branch. +- _commit_ : Representing a new commit on the current branch. +- _branch_ : To create & switch to a new branch, setting it as the current branch. +- _checkout_ : To checking out an existing branch and setting it as the current branch. +- _merge_ : To merge an existing branch onto the current branch. With the help of these key git commands, you will be able to draw a gitgraph in Mermaid very easily and quickly. Entity names are often capitalized, although there is no accepted standard on this, and it is not required in Mermaid. @@ -70,9 +70,9 @@ In this example, we have given our custom IDs to the commits. In Mermaid, a commit can be of three type, which render a bit different in the diagram. These types are: -- `NORMAL` : Default commit type. Represented by a solid circle in the diagram -- `REVERSE` : To emphasize a commit as a reverse commit. Represented by a crossed solid circle in the diagram. -- `HIGHLIGHT` : To highlight a particular commit in the diagram. Represented by a filled rectangle in the diagram. +- `NORMAL` : Default commit type. Represented by a solid circle in the diagram +- `REVERSE` : To emphasize a commit as a reverse commit. Represented by a crossed solid circle in the diagram. +- `HIGHLIGHT` : To highlight a particular commit in the diagram. Represented by a filled rectangle in the diagram. For a given commit you may specify its type at the time of declaring it using the `type` attribute, followed by `:` and the required type option discussed above. For example: `commit type: HIGHLIGHT` @@ -192,9 +192,9 @@ Since the current branch at this point is still `main`, the last two commits are You can also decorate your merge with similar attributes as you did for the commit using: -- `id`--> To override the default ID with custom ID -- `tag`--> To add a custom tag to your merge commit -- `type`--> To override the default shape of merge commit. Here you can use other commit type mentioned earlier. +- `id`--> To override the default ID with custom ID +- `tag`--> To add a custom tag to your merge commit +- `type`--> To override the default shape of merge commit. Here you can use other commit type mentioned earlier. And you can choose to use none, some or all of these attributes together. For example: `merge develop id: "my_custom_id" tag: "my_custom_tag" type: REVERSE` @@ -265,10 +265,10 @@ Let see an example: In Mermaid, you have the option to configure the gitgraph diagram. You can configure the following options: -- `showBranches` : Boolean, default is `true`. If set to `false`, the branches are not shown in the diagram. -- `showCommitLabel` : Boolean, default is `true`. If set to `false`, the commit labels are not shown in the diagram. -- `mainBranchName` : String, default is `main`. The name of the default/root branch. -- `mainBranchOrder` : Position of the main branch in the list of branches. default is `0`, meaning, by default `main` branch is the first in the order. +- `showBranches` : Boolean, default is `true`. If set to `false`, the branches are not shown in the diagram. +- `showCommitLabel` : Boolean, default is `true`. If set to `false`, the commit labels are not shown in the diagram. +- `mainBranchName` : String, default is `main`. The name of the default/root branch. +- `mainBranchOrder` : Position of the main branch in the list of branches. default is `0`, meaning, by default `main` branch is the first in the order. Let's look at them one by one. @@ -466,9 +466,9 @@ Sometimes you may want to customize the order of the branches. You can do this b Mermaid follows the given precedence order of the `order` keyword. -- Main branch is always shown first as it has default order value of `0`. (unless its order is modified and changed from `0` using the `mainBranchOrder` keyword in the config) -- Next, All branches without an `order` are shown in the order of their appearance in the diagram code. -- Next, All branches with an `order` are shown in the order of their `order` value. +- Main branch is always shown first as it has default order value of `0`. (unless its order is modified and changed from `0` using the `mainBranchOrder` keyword in the config) +- Next, All branches without an `order` are shown in the order of their appearance in the diagram code. +- Next, All branches with an `order` are shown in the order of their `order` value. To fully control the order of all the branches, you must define `order` for all the branches. @@ -514,11 +514,11 @@ Mermaid supports a bunch of pre-defined themes which you can use to find the rig The following are the different pre-defined theme options: -- `base` -- `forest` -- `dark` -- `default` -- `neutral` +- `base` +- `forest` +- `dark` +- `default` +- `neutral` **NOTE**: To change theme you can either use the `initialize` call or _directives_. Learn more about [directives](./directives.md) Let's put them to use, and see how our sample diagram looks in different themes: diff --git a/src/docs/integrations.md b/src/docs/integrations.md index ff7c9b30a..4fba4949e 100644 --- a/src/docs/integrations.md +++ b/src/docs/integrations.md @@ -1,11 +1,11 @@ # Integrations -The following list is a compilation of different integrations and plugins that allow the rendering of mermaid definitions within other applications. +The following list is a compilation of different integrations and plugins that allow the rendering of mermaid definitions within other applications. They also serve as proof of concept, for the variety of things that can be built with mermaid. - ## Productivity + - [GitHub](https://github.com) (**Native support**) - [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) (**Native support**) - [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action) @@ -34,7 +34,7 @@ They also serve as proof of concept, for the variety of things that can be built ## CRM/ERP/Similar - - [coreBOS](https://blog.corebos.org/blog/december2019) +- [coreBOS](https://blog.corebos.org/blog/december2019) ## Blogs @@ -147,22 +147,22 @@ They also serve as proof of concept, for the variety of things that can be built ## Browser Extensions -| Name | Chrome Web Store | Firefox Add-ons | Opera | Edge | Source/Repository | -| -- | -- | -- | -- | -- | -- | -| GitHub + Mermaid | - | [🦊🔗](https://addons.mozilla.org/firefox/addon/github-mermaid/) | - | - | [🐙🔗](https://github.com/BackMarket/github-mermaid-extension) -| Asciidoctor Live Preview | [🎡🔗](https://chrome.google.com/webstore/detail/asciidoctorjs-live-previe/iaalpfgpbocpdfblpnhhgllgbdbchmia) | - | - | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/asciidoctorjs-live-previ/pefkelkanablhjdekgdahplkccnbdggd?hl=en-US) | -| -| Diagram Tab| -| - | - | - | [🐙🔗](https://github.com/khafast/diagramtab) | -| Markdown Diagrams| [🎡🔗](https://chrome.google.com/webstore/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel/) | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/) | [🔴🔗](https://addons.opera.com/en/extensions/details/markdown-diagrams/) | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe) | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) | -| Markdown Viewer| - | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | - | - | [🐙🔗](https://github.com/simov/markdown-viewer)| -| Extensions for Mermaid| - | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | [🔴🔗](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/)| - | [🐙🔗](https://github.com/Stefan-S/mermaid-extension) | -| Chrome Diagrammer| [🎡🔗](https://chrome.google.com/webstore/detail/chrome-diagrammer/bkpbgjmkomfoakfklcjeoegkklgjnnpk) | - |- | - | - | -| Mermaid Diagrams | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-diagrams/phfcghedmopjadpojhmmaffjmfiakfil) | - | - | - | - | -|Mermaid Markdown | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-markdown/mboeoikjijmjcjgpccghbcoegikliijg) | - | - | - | - | -| Monkeys | [🎡🔗](https://chrome.google.com/webstore/detail/monkeys-mermaid-for-githu/cplfdpoajbclbgphaphphcldamfkjlgi) | - | - | - | - | -| Mermaid Previewer | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-previewer/oidjnlhbegipkcklbdfnbkikplpghfdl) | - | - | - | - | - +| Name | Chrome Web Store | Firefox Add-ons | Opera | Edge | Source/Repository | +| ------------------------ | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | +| GitHub + Mermaid | - | [🦊🔗](https://addons.mozilla.org/firefox/addon/github-mermaid/) | - | - | [🐙🔗](https://github.com/BackMarket/github-mermaid-extension) | +| Asciidoctor Live Preview | [🎡🔗](https://chrome.google.com/webstore/detail/asciidoctorjs-live-previe/iaalpfgpbocpdfblpnhhgllgbdbchmia) | - | - | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/asciidoctorjs-live-previ/pefkelkanablhjdekgdahplkccnbdggd?hl=en-US) | - | +| Diagram Tab | - | - | - | - | [🐙🔗](https://github.com/khafast/diagramtab) | +| Markdown Diagrams | [🎡🔗](https://chrome.google.com/webstore/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel/) | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/) | [🔴🔗](https://addons.opera.com/en/extensions/details/markdown-diagrams/) | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe) | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) | +| Markdown Viewer | - | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | - | - | [🐙🔗](https://github.com/simov/markdown-viewer) | +| Extensions for Mermaid | - | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | [🔴🔗](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/) | - | [🐙🔗](https://github.com/Stefan-S/mermaid-extension) | +| Chrome Diagrammer | [🎡🔗](https://chrome.google.com/webstore/detail/chrome-diagrammer/bkpbgjmkomfoakfklcjeoegkklgjnnpk) | - | - | - | - | +| Mermaid Diagrams | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-diagrams/phfcghedmopjadpojhmmaffjmfiakfil) | - | - | - | - | +| Mermaid Markdown | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-markdown/mboeoikjijmjcjgpccghbcoegikliijg) | - | - | - | - | +| Monkeys | [🎡🔗](https://chrome.google.com/webstore/detail/monkeys-mermaid-for-githu/cplfdpoajbclbgphaphphcldamfkjlgi) | - | - | - | - | +| Mermaid Previewer | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-previewer/oidjnlhbegipkcklbdfnbkikplpghfdl) | - | - | - | - | ## Other + - [Jekyll](https://jekyllrb.com/) - [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid) - [jekyll-mermaid-diagrams](https://github.com/fuzhibo/jekyll-mermaid-diagrams) diff --git a/src/docs/landing/index.html b/src/docs/landing/index.html index 4b04a98ce..9b1e3749f 100644 --- a/src/docs/landing/index.html +++ b/src/docs/landing/index.html @@ -49,16 +49,7 @@ <div class="pt-24"> <div style="" - class=" - container - lg:px-24 - max-w-5xl - px-4 - mx-auto - flex flex-wrap flex-col - md:flex-row - items-center - " + class="container lg:px-24 max-w-5xl px-4 mx-auto flex flex-wrap flex-col md:flex-row items-center" > <!--Left Col--> <div class="w-full md:w-1/2"> @@ -77,24 +68,7 @@ > <button style="background: #ffa41c; border: 1px solid #ff8f00" - class=" - mx-auto - lg:mx-0 - hover:underline - text-black - font-bold - rounded-full - my-6 - py-4 - px-8 - shadow-lg - focus:outline-none focus:shadow-outline - transform - transition - hover:scale-105 - duration-300 - ease-in-out - " + class="mx-auto lg:mx-0 hover:underline text-black font-bold rounded-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out" > Purchase on Amazon </button> @@ -352,25 +326,7 @@ > <button style="background: #ffa41c; border: 1px solid #ff8f00" - class=" - mx-auto - lg:mx-0 - hover:underline - bg-white - text-gray-800 - font-bold - rounded-full - my-6 - py-4 - px-8 - shadow-lg - focus:outline-none focus:shadow-outline - transform - transition - hover:scale-105 - duration-300 - ease-in-out - " + class="mx-auto lg:mx-0 hover:underline bg-white text-gray-800 font-bold rounded-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out" > Purchase Now on Amazon </button> diff --git a/src/docs/n00b-advanced.md b/src/docs/n00b-advanced.md index 407be8c08..1e6546f5c 100644 --- a/src/docs/n00b-advanced.md +++ b/src/docs/n00b-advanced.md @@ -1,6 +1,7 @@ # Advanced n00b mermaid (Coming soon..) ## splitting mermaid code from html + A more condensed html code can be achieved by embedding the mermaid code in its own .js file, which is referenced like so: ``` @@ -9,11 +10,13 @@ stuff stuff </body> </html> ``` + The actual mermaid file could for example look like this: ``` mermaid content... ``` + --- ## mermaid configuration options diff --git a/src/docs/n00b-gettingStarted.md b/src/docs/n00b-gettingStarted.md index a7e779970..1cdd2212e 100644 --- a/src/docs/n00b-gettingStarted.md +++ b/src/docs/n00b-gettingStarted.md @@ -85,7 +85,7 @@ c. The `mermaid.initialize()` call, which dictates the appearance of diagrams an ```html <body> - <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> + <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> </body> ``` @@ -93,13 +93,10 @@ c. The `mermaid.initialize()` call, which dictates the appearance of diagrams an ```html <body> - Here is a mermaid diagram: - <div class="mermaid"> - graph TD - A[Client] --> B[Load Balancer] - B --> C[Server01] - B --> D[Server02] - </div> + Here is a mermaid diagram: + <div class="mermaid"> + graph TD A[Client] --> B[Load Balancer] B --> C[Server01] B --> D[Server02] + </div> </body> ``` @@ -111,9 +108,9 @@ c. The `mermaid.initialize()` call, which dictates the appearance of diagrams an ```html <body> - <script> - mermaid.initialize({ startOnLoad: true }); - </script> + <script> + mermaid.initialize({ startOnLoad: true }); + </script> </body> ``` @@ -132,29 +129,23 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac ```html <html> - <body> - <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> - <script> - mermaid.initialize({ startOnLoad: true }); - </script> + <body> + <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> + <script> + mermaid.initialize({ startOnLoad: true }); + </script> - Here is one mermaid diagram: - <div class="mermaid"> - graph TD - A[Client] --> B[Load Balancer] - B --> C[Server1] - B --> D[Server2] - </div> + Here is one mermaid diagram: + <div class="mermaid"> + graph TD A[Client] --> B[Load Balancer] B --> C[Server1] B --> D[Server2] + </div> - And here is another: - <div class="mermaid"> - graph TD - A[Client] -->|tcp_123| B - B(Load Balancer) - B -->|tcp_456| C[Server1] - B -->|tcp_456| D[Server2] - </div> - </body> + And here is another: + <div class="mermaid"> + graph TD A[Client] -->|tcp_123| B B(Load Balancer) B -->|tcp_456| C[Server1] B -->|tcp_456| + D[Server2] + </div> + </body> </html> ``` @@ -163,27 +154,19 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file, ```html <html lang="en"> - <head> - <meta charset="utf-8" /> - </head> - <body> - <div class="mermaid"> - graph LR - A --- B - B-->C[fa:fa-ban forbidden] - B-->D(fa:fa-spinner); - </div> - <div class="mermaid"> - graph TD - A[Client] --> B[Load Balancer] - B --> C[Server1] - B --> D[Server2] - </div> - <script src="The\Path\In\Your\Package\mermaid.js"></script> - <script> - mermaid.initialize({ startOnLoad: true }); - </script> - </body> + <head> + <meta charset="utf-8" /> + </head> + <body> + <div class="mermaid">graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);</div> + <div class="mermaid"> + graph TD A[Client] --> B[Load Balancer] B --> C[Server1] B --> D[Server2] + </div> + <script src="The\Path\In\Your\Package\mermaid.js"></script> + <script> + mermaid.initialize({ startOnLoad: true }); + </script> + </body> </html> ``` @@ -204,4 +187,4 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file, **Comments from Knut Sveidqvist, creator of mermaid:** -- In early versions of mermaid, the `<script src>` tag was invoked in the `<head>` part of the web page. Nowadays we can place it in the `<body>` as seen above. Older parts of the documentation frequently reflects the previous way which still works. +- In early versions of mermaid, the `<script src>` tag was invoked in the `<head>` part of the web page. Nowadays we can place it in the `<body>` as seen above. Older parts of the documentation frequently reflects the previous way which still works. diff --git a/src/docs/n00b-overview.md b/src/docs/n00b-overview.md index e6b7d4494..53627e867 100644 --- a/src/docs/n00b-overview.md +++ b/src/docs/n00b-overview.md @@ -12,7 +12,7 @@ Diagrams/Charts are significant but also become obsolete/inaccurate very fast. T # Doc Rot in Diagrams -Doc-Rot kills diagrams as quickly as it does text, but it takes hours in a desktop application to produce a diagram. +Doc-Rot kills diagrams as quickly as it does text, but it takes hours in a desktop application to produce a diagram. Mermaid seeks to change using markdown-inspired syntax. The process is a quicker, less complicated, and more convenient way of going from concept to visualization. @@ -22,25 +22,21 @@ It is a relatively straightforward solution to a significant hurdle with the sof **Mermaid text definitions can be saved for later reuse and editing.** ->These are the Mermaid diagram definitions inside `<div>` tags, with the `class=mermaid`. +> These are the Mermaid diagram definitions inside `<div>` tags, with the `class=mermaid`. ```html - <div class="mermaid"> - graph TD - A[Client] --> B[Load Balancer] - B --> C[Server01] - B --> D[Server02] - </div> +<div class="mermaid"> + graph TD A[Client] --> B[Load Balancer] B --> C[Server01] B --> D[Server02] +</div> ``` **render** ->This is the core function of the Mermaid API. It reads all the `Mermaid Definitions` inside `div` tags and returns an SVG file, based on the definition. - +> This is the core function of the Mermaid API. It reads all the `Mermaid Definitions` inside `div` tags and returns an SVG file, based on the definition. **Nodes** ->These are the boxes that contain text or otherwise discrete pieces of each diagram, separated generally by arrows, except for Gantt Charts and User Journey Diagrams. They will be referred often in the instructions. Read for Diagram Specific [Syntax](./n00b-syntaxReference) +> These are the boxes that contain text or otherwise discrete pieces of each diagram, separated generally by arrows, except for Gantt Charts and User Journey Diagrams. They will be referred often in the instructions. Read for Diagram Specific [Syntax](./n00b-syntaxReference) ## Advantages of using Mermaid @@ -57,13 +53,13 @@ Mermaid solves this by reducing the time and effort required to create diagrams Because, the text base for the diagrams allows it to be updated easily. Also, it can be made part of production scripts (and other pieces of code). So less time is spent on documenting, as a separate task. - ## Catching up with Development Being based on markdown, Mermaid can be used, not only by accomplished front-end developers, but by most computer savvy people to render diagrams, at much faster speeds. In fact one can pick up the syntax for it quite easily from the examples given and there are many tutorials available in the internet. ## Mermaid is for everyone. + Video [Tutorials](https://mermaid-js.github.io/mermaid/#/./Tutorials) are also available for the mermaid [live editor](https://mermaid.live/). -Alternatively you can use Mermaid [Plug-Ins](https://mermaid-js.github.io/mermaid/#/./integrations), with tools you already use, like Google Docs. +Alternatively you can use Mermaid [Plug-Ins](https://mermaid-js.github.io/mermaid/#/./integrations), with tools you already use, like Google Docs. diff --git a/src/docs/n00b-syntaxReference.md b/src/docs/n00b-syntaxReference.md index d10918be2..eba9ca535 100644 --- a/src/docs/n00b-syntaxReference.md +++ b/src/docs/n00b-syntaxReference.md @@ -1,12 +1,14 @@ # Diagram Syntax -Mermaid's syntax is used to create diagrams. You'll find that it is not too tricky and can be learned in a day. The next sections dive deep into the syntax of each diagram type. -Syntax, together with Deployment and Configuration constitute the whole of Mermaid. +Mermaid's syntax is used to create diagrams. You'll find that it is not too tricky and can be learned in a day. The next sections dive deep into the syntax of each diagram type. + +Syntax, together with Deployment and Configuration constitute the whole of Mermaid. Diagram Examples can be found in the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor), it is also a great practice area. ## Syntax Structure -One would notice that all **Diagrams definitions begin** with a declaration of the **diagram type**, followed by the definitions of the diagram and its contents. This declaration notifies the parser which kind of diagram the code is supposed to generate. + +One would notice that all **Diagrams definitions begin** with a declaration of the **diagram type**, followed by the definitions of the diagram and its contents. This declaration notifies the parser which kind of diagram the code is supposed to generate. **Example** : The code below is for an Entity Relationship Diagram, specified by the `erDiagram` declaration. What follows is the definition of the different `Entities` represented in it. @@ -22,56 +24,44 @@ erDiagram PRODUCT ||--o{ ORDER-ITEM : "ordered in" ``` - The [Getting Started](./n00b-gettingStarted.md) section can also provide some practical examples of mermaid syntax. - - ## Diagram Breaking One should **beware the use of some words or symbols** that can break diagrams. These words or symbols are few and often only affect specific types of diagrams. The table below will continuously be updated. - -| Diagram Breakers | Reason |Solution| -| --- | --- |---| -| **Comments** | | | -|[`%%{``}%%`](https://github.com/mermaid-js/mermaid/issues/1968) | Similar to [Directives](./directives.md) confuses the renderer.|In comments using `%%`, avoid using "{}".| -| **Flow-Charts** | | | -|'end' | The word "End" can cause Flowcharts and Sequence diagrams to break | Wrap them in quotation marks to prevent breakage.| -| [Nodes inside Nodes](https://mermaid-js.github.io/mermaid/#/flowchart?id=special-characters-that-break-syntax)| Mermaid gets confused with nested shapes | wrap them in quotation marks to prevent breaking| - - +| Diagram Breakers | Reason | Solution | +| -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ------------------------------------------------- | +| **Comments** | | | +| [` %%{``}%% `](https://github.com/mermaid-js/mermaid/issues/1968) | Similar to [Directives](./directives.md) confuses the renderer. | In comments using `%%`, avoid using "{}". | +| **Flow-Charts** | | | +| 'end' | The word "End" can cause Flowcharts and Sequence diagrams to break | Wrap them in quotation marks to prevent breakage. | +| [Nodes inside Nodes](https://mermaid-js.github.io/mermaid/#/flowchart?id=special-characters-that-break-syntax) | Mermaid gets confused with nested shapes | wrap them in quotation marks to prevent breaking | ### Mermaid Live Editor -Now, that you've seen what you should not add to your diagrams, you can play around with them in the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor). + +Now, that you've seen what you should not add to your diagrams, you can play around with them in the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor). # Configuration -Configuration is the third part of Mermaid, after deployment and syntax. It deals with the different ways that Mermaid can be customized across different deployments. +Configuration is the third part of Mermaid, after deployment and syntax. It deals with the different ways that Mermaid can be customized across different deployments. If you are interested in altering and customizing your Mermaid Diagrams, you will find the methods and values available for [Configuration](./Setup.md) here. It includes themes. -This section will introduce the different methods of configuring the behaviors and appearances of Mermaid Diagrams. +This section will introduce the different methods of configuring the behaviors and appearances of Mermaid Diagrams. The following are the most commonly used methods, and they are all tied to Mermaid [Deployment](./n00b-gettingStarted.md) methods. ### Configuration Section in the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor). -Here you can edit certain values to change the behavior and appearance of the diagram. +Here you can edit certain values to change the behavior and appearance of the diagram. -### [The initialize() call](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted?id=_3-calling-the-javascript-api), -Used when Mermaid is called via an API, or through a `<script>` tag. +### [The initialize() call](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted?id=_3-calling-the-javascript-api), +Used when Mermaid is called via an API, or through a `<script>` tag. ### [Directives](./directives.md), -Allows for 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 `%%{ }%%`. It can be done either above or below your diagram definition. + +Allows for 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 `%%{ }%%`. It can be done either above or below your diagram definition. ### [Theme Manipulation](./theming.md): -An application of using Directives to change [Themes](./theming.md). `Theme` is a value within Mermaid's configuration that dictates the color scheme for diagrams. - - - - - - - - +An application of using Directives to change [Themes](./theming.md). `Theme` is a value within Mermaid's configuration that dictates the color scheme for diagrams. diff --git a/src/docs/newDiagram.md b/src/docs/newDiagram.md index c3fcd18a3..4b6c7dfd6 100644 --- a/src/docs/newDiagram.md +++ b/src/docs/newDiagram.md @@ -2,15 +2,14 @@ ### Step 1: Grammar & Parsing - #### Grammar This would be to define a jison grammar for the new diagram type. That should start with a way to identify that the text in the mermaid tag is a diagram of that type. Create a new folder under diagrams for your new diagram type and a parser folder in it. This leads us to step 2. For instance: -* the flowchart starts with the keyword graph. -* the sequence diagram starts with the keyword sequenceDiagram +- the flowchart starts with the keyword graph. +- the sequence diagram starts with the keyword sequenceDiagram #### Store data found during parsing @@ -36,74 +35,67 @@ For more info look in the example diagram type: The `yy` object has the following function: ```javascript -exports.parseError = function(err, hash){ - mermaid.parseError(err, hash) +exports.parseError = function (err, hash) { + mermaid.parseError(err, hash); }; ``` when parsing the `yy` object is initialized as per below: ```javascript -var parser -parser = exampleParser.parser -parser.yy = db +var parser; +parser = exampleParser.parser; +parser.yy = db; ``` - ### Step 2: Rendering Write a renderer that given the data found during parsing renders the diagram. To look at an example look at sequenceRenderer.js rather then the flowchart renderer as this is a more generic example. Place the renderer in the diagram folder. - ### Step 3: Detection of the new diagram type The second thing to do is to add the capability to detect the new new diagram to type to the detectType in utils.js. The detection should return a key for the new diagram type. - ### Step 4: The final piece - triggering the rendering At this point when mermaid is trying to render the diagram, it will detect it as being of the new type but there will be no match when trying to render the diagram. To fix this add a new case in the switch statement in main.js:init this should match the diagram type returned from step #2. The code in this new case statement should call the renderer for the diagram type with the data found by the parser as an argument. - ## Usage of the parser as a separate module - ### Setup ```javascript -var graph = require('./graphDb') -var flow = require('./parser/flow') -flow.parser.yy = graph +var graph = require('./graphDb'); +var flow = require('./parser/flow'); +flow.parser.yy = graph; ``` - ### Parsing ```javascript -flow.parser.parse(text) +flow.parser.parse(text); ``` - ### Data extraction ```javascript -graph.getDirection() -graph.getVertices() -graph.getEdges() +graph.getDirection(); +graph.getVertices(); +graph.getEdges(); ``` The parser is also exposed in the mermaid api by calling: ```javascript -var parser = mermaid.getParser() +var parser = mermaid.getParser(); ``` Note that the parse needs a graph object to store the data as per: ```javascript -flow.parser.yy = graph +flow.parser.yy = graph; ``` Look at `graphDb.js` for more details on that object. @@ -116,10 +108,10 @@ If you are using a dagre based layout, please use flowchart-v2 as a template and There are a few features that are common between the different types of diagrams. We try to standardize the diagrams that work as similar as possible for the end user. The commonalities are: -* Directives, a way of modifying the diagram configuration from within the diagram code. -* Accessibility, a way for an author to provide additional information like titles and descriptions to people accessing a text with diagrams using a screen reader. -* Themes, there is a common way to modify the styling of diagrams in Mermaid. -* Comments should follow mermaid standards +- Directives, a way of modifying the diagram configuration from within the diagram code. +- Accessibility, a way for an author to provide additional information like titles and descriptions to people accessing a text with diagrams using a screen reader. +- Themes, there is a common way to modify the styling of diagrams in Mermaid. +- Comments should follow mermaid standards Here some pointers on how to handle these different areas. @@ -127,6 +119,7 @@ Here some pointers on how to handle these different areas. Here is example handling from flowcharts: Jison: + ```jison /* lexical grammar */ @@ -173,6 +166,7 @@ It is probably a good idea to keep the handling similar to this in your new diag ## Accessibility The syntax for adding title and description looks like this: + ``` accTitle: The title accDescr: The description @@ -222,6 +216,7 @@ import { For rendering the accessibility tags you have again an existing function you can use. **In the renderer:** + ```js import addSVGAccessibilityFields from '../../accessibility'; @@ -239,11 +234,11 @@ When adding themes to a diagram it comes down to a few important locations in th The entry point for the styling engine is in **src/styles.js**. The getStyles function will be called by Mermaid when the styles are being applied to the diagram. -This function will in turn call a function *your diagram should provide* returning the css for the new diagram. The diagram specific, also which is commonly also called getStyles and located in the folder for your diagram under src/diagrams and should be named styles.js. The getStyles function will be called with the theme options as an argument like in the following example: +This function will in turn call a function _your diagram should provide_ returning the css for the new diagram. The diagram specific, also which is commonly also called getStyles and located in the folder for your diagram under src/diagrams and should be named styles.js. The getStyles function will be called with the theme options as an argument like in the following example: ```js const getStyles = (options) => - ` + ` .line { stroke-width: 1; stroke: ${options.lineColor}; @@ -253,17 +248,16 @@ const getStyles = (options) => `; ``` -Note that you need to provide your function to the main getStyles by adding it into the themes object in **src/styles.js** like in the xyzDiagram in the provided example: +Note that you need to provide your function to the main getStyles by adding it into the themes object in **src/styles.js** like in the xyzDiagram in the provided example: ```js const themes = { - flowchart, - 'flowchart-v2': flowchart, - sequence, - xyzDiagram, - //... + flowchart, + 'flowchart-v2': flowchart, + sequence, + xyzDiagram, + //... }; ``` 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. - diff --git a/src/docs/pie.md b/src/docs/pie.md index 266b6f317..b7dcd7aa5 100644 --- a/src/docs/pie.md +++ b/src/docs/pie.md @@ -1,7 +1,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. @@ -12,26 +12,28 @@ pie title Pets adopted by volunteers "Rats" : 15 ``` - ## Syntax + Drawing a pie chart is really simple in mermaid. + - Start with `pie` keyword to begin the diagram - - `showData` to render the actual data values after the legend text. This is ***OPTIONAL*** -- Followed by `title` keyword and its value in string to give a title to the pie-chart. This is ***OPTIONAL*** + - `showData` to render the actual data values after the legend text. This is **_OPTIONAL_** +- Followed by `title` keyword and its value in string to give a title to the pie-chart. This is **_OPTIONAL_** - Followed by dataSet - - `label` for a section in the pie diagram within `" "` quotes. - - Followed by `:` colon as separator - - Followed by `positive numeric value` (supported upto two decimal places) + - `label` for a section in the pie diagram within `" "` quotes. + - 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] - . - . +[title] [titlevalue] (OPTIONAL) +"[datakey1]" : [dataValue1] +"[datakey2]" : [dataValue2] +"[datakey3]" : [dataValue3] +. +. ## Example + ```mermaid-example pie showData title Key elements in Product X diff --git a/src/docs/requirementDiagram.md b/src/docs/requirementDiagram.md index bc2e1a70b..7c221312b 100644 --- a/src/docs/requirementDiagram.md +++ b/src/docs/requirementDiagram.md @@ -25,11 +25,12 @@ Rendering requirements is straightforward. There are three types of components to a requirement diagram: requirement, element, and relationship. -The grammar for defining each is defined below. Words denoted in angle brackets, such as ```<word>```, are enumerated keywords that have options elaborated in a table. ```user_defined_...``` is use in any place where user input is expected. +The grammar for defining each is defined below. Words denoted in angle brackets, such as `<word>`, are enumerated keywords that have options elaborated in a table. `user_defined_...` is use in any place where user input is expected. -An important note on user text: all input can be surrounded in quotes or not. For example, both ```Id: "here is an example"``` and ```Id: here is an example``` are both valid. However, users must be careful with unquoted input. The parser will fail if another keyword is detected. +An important note on user text: all input can be surrounded in quotes or not. For example, both `Id: "here is an example"` and `Id: here is an example` are both valid. However, users must be careful with unquoted input. The parser will fail if another keyword is detected. ### Requirement + A requirement definition contains a requirement type, name, id, text, risk, and verification method. The syntax follows: ``` @@ -43,13 +44,14 @@ A requirement definition contains a requirement type, name, id, text, risk, and Type, risk, and method are enumerations defined in SysML. -| Keyword | Options | -|---|---| -| Type | requirement, functionalRequirement, interfaceRequirement, performanceRequirement, physicalRequirement, designConstraint | -| Risk | Low, Medium, High | -| VerificationMethod | Analysis, Inspection, Test, Demonstration | +| Keyword | Options | +| ------------------ | ----------------------------------------------------------------------------------------------------------------------- | +| Type | requirement, functionalRequirement, interfaceRequirement, performanceRequirement, physicalRequirement, designConstraint | +| Risk | Low, Medium, High | +| VerificationMethod | Analysis, Inspection, Test, Demonstration | ### Element + 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. ``` @@ -59,8 +61,8 @@ element user_defined_name { } ``` - ### Relationship + Relationships are comprised of a source node, destination node, and relationship type. Each follows the definition format of @@ -82,6 +84,7 @@ A relationship type can be one of contains, copies, derives, satisfies, verifies Each relationship is labeled in the diagram. ## Larger Example + This example uses all features of the diagram. ```mermaid-example diff --git a/src/docs/security.md b/src/docs/security.md index 3b628f84f..7e61a60cf 100644 --- a/src/docs/security.md +++ b/src/docs/security.md @@ -1,7 +1,9 @@ # 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. ## Reporting vulnerabilities + To report a vulnerability, please e-mail security@mermaid.live with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue. We aim to reply within three working days, probably much sooner. @@ -16,7 +18,6 @@ Keep current with the latest Mermaid releases. We regularly update Mermaid, and Keep your application’s dependencies up to date. Make sure you upgrade your package dependencies to keep the dependencies up to date. Avoid pinning to specific versions for your dependencies and, if you do, make sure you check periodically to see if your dependencies have had security updates, and update the pin accordingly. - ## Configuring DomPurify -By default Mermaid uses a baseline [DOMPurify](https://github.com/cure53/DOMPurify) config. It is possible to override the options passed to DOMPurify by adding a `dompurifyConfig` key to the Mermaid options. This could potentially break the output of Mermaid so use this with caution. \ No newline at end of file +By default Mermaid uses a baseline [DOMPurify](https://github.com/cure53/DOMPurify) config. It is possible to override the options passed to DOMPurify by adding a `dompurifyConfig` key to the Mermaid options. This could potentially break the output of Mermaid so use this with caution. diff --git a/src/docs/sequenceDiagram.md b/src/docs/sequenceDiagram.md index e8cfe53da..434e9572f 100644 --- a/src/docs/sequenceDiagram.md +++ b/src/docs/sequenceDiagram.md @@ -364,7 +364,7 @@ It is possible to get a sequence number attached to each arrow in a sequence dia ```html <script> - mermaid.initialize({ sequence: { showSequenceNumbers: true } }); + mermaid.initialize({ sequence: { showSequenceNumbers: true } }); </script> ``` @@ -454,81 +454,81 @@ Styling of a sequence diagram is done by defining a number of css classes. Durin ```css body { - background: white; + background: white; } .actor { - stroke: #ccccff; - fill: #ececff; + stroke: #ccccff; + fill: #ececff; } text.actor { - fill: black; - stroke: none; - font-family: Helvetica; + fill: black; + stroke: none; + font-family: Helvetica; } .actor-line { - stroke: grey; + stroke: grey; } .messageLine0 { - stroke-width: 1.5; - stroke-dasharray: '2 2'; - marker-end: 'url(#arrowhead)'; - stroke: black; + stroke-width: 1.5; + stroke-dasharray: '2 2'; + marker-end: 'url(#arrowhead)'; + stroke: black; } .messageLine1 { - stroke-width: 1.5; - stroke-dasharray: '2 2'; - stroke: black; + stroke-width: 1.5; + stroke-dasharray: '2 2'; + stroke: black; } #arrowhead { - fill: black; + fill: black; } .messageText { - fill: black; - stroke: none; - font-family: 'trebuchet ms', verdana, arial; - font-size: 14px; + fill: black; + stroke: none; + font-family: 'trebuchet ms', verdana, arial; + font-size: 14px; } .labelBox { - stroke: #ccccff; - fill: #ececff; + stroke: #ccccff; + fill: #ececff; } .labelText { - fill: black; - stroke: none; - font-family: 'trebuchet ms', verdana, arial; + fill: black; + stroke: none; + font-family: 'trebuchet ms', verdana, arial; } .loopText { - fill: black; - stroke: none; - font-family: 'trebuchet ms', verdana, arial; + fill: black; + stroke: none; + font-family: 'trebuchet ms', verdana, arial; } .loopLine { - stroke-width: 2; - stroke-dasharray: '2 2'; - marker-end: 'url(#arrowhead)'; - stroke: #ccccff; + stroke-width: 2; + stroke-dasharray: '2 2'; + marker-end: 'url(#arrowhead)'; + stroke: #ccccff; } .note { - stroke: #decc93; - fill: #fff5ad; + stroke: #decc93; + fill: #fff5ad; } .noteText { - fill: black; - stroke: none; - font-family: 'trebuchet ms', verdana, arial; - font-size: 14px; + fill: black; + stroke: none; + font-family: 'trebuchet ms', verdana, arial; + font-size: 14px; } ``` @@ -542,12 +542,12 @@ How to use the CLI is described in the [mermaidCLI](mermaidCLI) page. ```javascript mermaid.sequenceConfig = { - diagramMarginX: 50, - diagramMarginY: 10, - boxTextMargin: 5, - noteMargin: 10, - messageMargin: 35, - mirrorActors: true, + diagramMarginX: 50, + diagramMarginY: 10, + boxTextMargin: 5, + noteMargin: 10, + messageMargin: 35, + mirrorActors: true, }; ``` diff --git a/src/docs/stateDiagram.md b/src/docs/stateDiagram.md index 6db8fbaed..e28819e7a 100644 --- a/src/docs/stateDiagram.md +++ b/src/docs/stateDiagram.md @@ -140,7 +140,7 @@ stateDiagram-v2 } ``` -*You can not define transitions between internal states belonging to different composite states* +_You can not define transitions between internal states belonging to different composite states_ ## Choice @@ -177,7 +177,7 @@ It is possible to specify a fork in the diagram using <<fork>> <& Sometimes nothing says it better then a Post-it note. That is also the case in state diagrams. -Here you can choose to put the note to the *right of* or to the *left of* a node. +Here you can choose to put the note to the _right of_ or to the _left of_ a node. ```mermaid-example stateDiagram-v2 @@ -228,12 +228,11 @@ stateDiagram 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 +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 ```mmd stateDiagram-v2 @@ -248,7 +247,7 @@ stateDiagram-v2 ## Styling -Styling of the a state diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/state.scss +Styling of the a state diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/state.scss ## Spaces in state names diff --git a/src/docs/theme.css b/src/docs/theme.css index 15be9db1c..28dbc0ab5 100644 --- a/src/docs/theme.css +++ b/src/docs/theme.css @@ -1,3 +1,827 @@ -@import url("https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600");*{-webkit-font-smoothing:antialiased;-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:none;-webkit-touch-callout:none;box-sizing:border-box} +@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600'); +* { + -webkit-font-smoothing: antialiased; + -webkit-overflow-scrolling: touch; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-text-size-adjust: none; + -webkit-touch-callout: none; + box-sizing: border-box; +} -body:not(.ready){overflow:hidden}body:not(.ready) .app-nav,body:not(.ready)>nav,body:not(.ready) [data-cloak]{display:none}div#app{font-size:30px;font-weight:lighter;margin:40vh auto;text-align:center}div#app:empty:before{content:"Loading..."}.emoji{height:1.2rem;vertical-align:middle}.progress{background-color:var(--theme-color,#42b983);height:2px;left:0;position:fixed;right:0;top:0;transition:width .2s,opacity .4s;width:0;z-index:999999}.search .search-keyword,.search a:hover{color:var(--theme-color,#42b983)}.search .search-keyword{font-style:normal;font-weight:700}body,html{height:100%}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:#34495e;font-family:Source Sans Pro,Helvetica Neue,Arial,sans-serif;font-size:15px;letter-spacing:0;margin:0;overflow-x:hidden}img{max-width:100%}a[disabled]{cursor:not-allowed;opacity:.6}kbd{border:1px solid #ccc;border-radius:3px;display:inline-block;font-size:12px!important;line-height:12px;margin-bottom:3px;padding:3px 5px;vertical-align:middle}li input[type=checkbox]{margin:0 .2em .25em 0;vertical-align:middle}.app-nav{margin:25px 60px 0 0;position:absolute;right:0;text-align:right;z-index:10}.app-nav.no-badge{margin-right:25px}.app-nav p{margin:0}.app-nav>a{margin:0 1rem;padding:5px 0}.app-nav li,.app-nav ul{display:inline-block;list-style:none;margin:0}.app-nav a{color:inherit;font-size:16px;text-decoration:none;transition:color .3s}.app-nav a.active,.app-nav a:hover{color:var(--theme-color,#42b983)}.app-nav a.active{border-bottom:2px solid var(--theme-color,#42b983)}.app-nav li{display:inline-block;margin:0 1rem;padding:5px 0;position:relative;cursor:pointer}.app-nav li ul{background-color:#fff;border:1px solid;border-color:#ddd #ddd #ccc;border-radius:4px;box-sizing:border-box;display:none;max-height:calc(100vh - 61px);overflow-y:auto;padding:10px 0;position:absolute;right:-15px;text-align:left;top:100%;white-space:nowrap}.app-nav li ul li{display:block;font-size:14px;line-height:1rem;margin:8px 14px;white-space:nowrap}.app-nav li ul a{display:block;font-size:inherit;margin:0;padding:0}.app-nav li ul a.active{border-bottom:0}.app-nav li:hover ul{display:block}.github-corner{border-bottom:0;position:fixed;right:0;text-decoration:none;top:0;z-index:1}.github-corner:hover .octo-arm{-webkit-animation:octocat-wave .56s ease-in-out;animation:octocat-wave .56s ease-in-out}.github-corner svg{color:#fff;fill:var(--theme-color,#42b983);height:80px;width:80px}main{display:block;position:relative;width:100vw;height:100%;z-index:0}main.hidden{display:none}.anchor{display:inline-block;text-decoration:none;transition:all .3s}.anchor span{color:#34495e}.anchor:hover{text-decoration:underline}.sidebar{border-right:1px solid rgba(0,0,0,.07);overflow-y:auto;padding:40px 0 0;position:absolute;top:0;bottom:0;left:0;transition:transform .25s ease-out;width:300px;z-index:20}.sidebar>h1{margin:0 auto 1rem;font-size:1.5rem;font-weight:300;text-align:center}.sidebar>h1 a{color:inherit;text-decoration:none}.sidebar>h1 .app-nav{display:block;position:static}.sidebar .sidebar-nav{line-height:2em;padding-bottom:40px}.sidebar li.collapse .app-sub-sidebar{display:none}.sidebar ul{margin:0 0 0 15px;padding:0}.sidebar li>p{font-weight:700;margin:0}.sidebar ul,.sidebar ul li{list-style:none}.sidebar ul li a{border-bottom:none;display:block}.sidebar ul li ul{padding-left:20px}.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-thumb{background:transparent;border-radius:4px}.sidebar:hover::-webkit-scrollbar-thumb{background:hsla(0,0%,53.3%,.4)}.sidebar:hover::-webkit-scrollbar-track{background:hsla(0,0%,53.3%,.1)}.sidebar-toggle{background-color:transparent;background-color:hsla(0,0%,100%,.8);border:0;outline:none;padding:10px;position:absolute;bottom:0;left:0;text-align:center;transition:opacity .3s;width:284px;z-index:30;cursor:pointer}.sidebar-toggle:hover .sidebar-toggle-button{opacity:.4}.sidebar-toggle span{background-color:var(--theme-color,#42b983);display:block;margin-bottom:4px;width:16px;height:2px}body.sticky .sidebar,body.sticky .sidebar-toggle{position:fixed}.content{padding-top:60px;position:absolute;top:0;right:0;bottom:0;left:300px;transition:left .25s ease}.markdown-section{margin:0 auto;max-width:80%;padding:30px 15px 40px;position:relative}.markdown-section>*{box-sizing:border-box;font-size:inherit}.markdown-section>:first-child{margin-top:0!important}.markdown-section hr{border:none;border-bottom:1px solid #eee;margin:2em 0}.markdown-section iframe{border:1px solid #eee;width:1px;min-width:100%}.markdown-section table{border-collapse:collapse;border-spacing:0;display:block;margin-bottom:1rem;overflow:auto;width:100%}.markdown-section th{font-weight:700}.markdown-section td,.markdown-section th{border:1px solid #ddd;padding:6px 13px}.markdown-section tr{border-top:1px solid #ccc}.markdown-section p.tip,.markdown-section tr:nth-child(2n){background-color:#f8f8f8}.markdown-section p.tip{border-bottom-right-radius:2px;border-left:4px solid #f66;border-top-right-radius:2px;margin:2em 0;padding:12px 24px 12px 30px;position:relative}.markdown-section p.tip:before{background-color:#f66;border-radius:100%;color:#fff;content:"!";font-family:Dosis,Source Sans Pro,Helvetica Neue,Arial,sans-serif;font-size:14px;font-weight:700;left:-12px;line-height:20px;position:absolute;height:20px;width:20px;text-align:center;top:14px}.markdown-section p.tip code{background-color:#efefef}.markdown-section p.tip em{color:#34495e}.markdown-section p.warn{background:rgba(66,185,131,.1);border-radius:2px;padding:1rem}.markdown-section ul.task-list>li{list-style-type:none}body.close .sidebar{transform:translateX(-300px)}body.close .sidebar-toggle{width:auto}body.close .content{left:0}@media print{.app-nav,.github-corner,.sidebar,.sidebar-toggle{display:none}}@media screen and (max-width:768px){.github-corner,.sidebar,.sidebar-toggle{position:fixed}.app-nav{margin-top:16px}.app-nav li ul{top:30px}main{height:auto;overflow-x:hidden}.sidebar{left:-300px;transition:transform .25s ease-out}.content{left:0;max-width:100vw;position:static;padding-top:20px;transition:transform .25s ease}.app-nav,.github-corner{transition:transform .25s ease-out}.sidebar-toggle{background-color:transparent;width:auto;padding:30px 30px 10px 10px}body.close .sidebar{transform:translateX(300px)}body.close .sidebar-toggle{background-color:hsla(0,0%,100%,.8);transition:background-color 1s;width:284px;padding:10px}body.close .content{transform:translateX(300px)}body.close .app-nav,body.close .github-corner{display:none}.github-corner:hover .octo-arm{-webkit-animation:none;animation:none}.github-corner .octo-arm{-webkit-animation:octocat-wave .56s ease-in-out;animation:octocat-wave .56s ease-in-out}}@-webkit-keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}section.cover{align-items:center;background-position:50%;background-repeat:no-repeat;background-size:cover;height:100vh;width:100vw;display:none}section.cover.show{display:flex}section.cover.has-mask .mask{background-color:#fff;opacity:.8;position:absolute;top:0;height:100%;width:100%}section.cover .cover-main{flex:1;margin:-20px 16px 0;text-align:center}section.cover a{color:inherit}section.cover a,section.cover a:hover{text-decoration:none}section.cover p{line-height:1.5rem;margin:1em 0}section.cover h1{color:inherit;font-size:2.5rem;font-weight:300;margin:.625rem 0 2.5rem;position:relative;text-align:center}section.cover h1 a{display:block}section.cover h1 small{bottom:-.4375rem;font-size:1rem;position:absolute}section.cover blockquote{font-size:1.5rem;text-align:center}section.cover ul{line-height:1.8;list-style-type:none;margin:1em auto;max-width:500px;padding:0}section.cover .cover-main>p:last-child a{border-radius:2rem;border:1px solid var(--theme-color,#42b983);box-sizing:border-box;color:var(--theme-color,#42b983);display:inline-block;font-size:1.05rem;letter-spacing:.1rem;margin:.5rem 1rem;padding:.75em 2rem;text-decoration:none;transition:all .15s ease}section.cover .cover-main>p:last-child a:last-child{background-color:var(--theme-color,#42b983);color:#fff}section.cover .cover-main>p:last-child a:last-child:hover{color:inherit;opacity:.8}section.cover .cover-main>p:last-child a:hover{color:inherit}section.cover blockquote>p>a{border-bottom:2px solid var(--theme-color,#42b983);transition:color .3s}section.cover blockquote>p>a:hover{color:var(--theme-color,#42b983)}.sidebar,body{background-color:#fff}.sidebar{color:#364149}.sidebar li{margin:6px 0}.sidebar ul li a{color:#505d6b;font-size:14px;font-weight:400;overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.sidebar ul li a:hover{text-decoration:underline}.sidebar ul li ul{padding:0}.sidebar ul li.active>a{border-right:2px solid;color:var(--theme-color,#42b983);font-weight:600}.app-sub-sidebar li:before{content:"-";padding-right:4px;float:left}.markdown-section h1,.markdown-section h2,.markdown-section h3,.markdown-section h4,.markdown-section strong{color:#2c3e50;font-weight:600}.markdown-section a{color:var(--theme-color,#42b983);font-weight:600}.markdown-section h1{font-size:2rem;margin:0 0 1rem}.markdown-section h2{font-size:1.75rem;margin:45px 0 .8rem}.markdown-section h3{font-size:1.5rem;margin:40px 0 .6rem}.markdown-section h4{font-size:1.25rem}.markdown-section h5{font-size:1rem}.markdown-section h6{color:#777;font-size:1rem}.markdown-section figure,.markdown-section p{margin:1.2em 0}.markdown-section ol,.markdown-section p,.markdown-section ul{line-height:1.6rem;word-spacing:.05rem}.markdown-section ol,.markdown-section ul{padding-left:1.5rem}.markdown-section blockquote{border-left:4px solid var(--theme-color,#42b983);color:#858585;margin:2em 0;padding-left:20px}.markdown-section blockquote p{font-weight:600;margin-left:0}.markdown-section iframe{margin:1em 0}.markdown-section em{color:#7f8c8d}.markdown-section code{border-radius:2px;color:#e96900;font-size:.8rem;margin:0 2px;padding:3px 5px;white-space:pre-wrap}.markdown-section code,.markdown-section pre{background-color:#f8f8f8;font-family:Roboto Mono,Monaco,courier,monospace}.markdown-section pre{-moz-osx-font-smoothing:initial;-webkit-font-smoothing:initial;line-height:1.5rem;margin:1.2em 0;overflow:auto;padding:0 1.4rem;position:relative;word-wrap:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8e908c}.token.namespace{opacity:.7}.token.boolean,.token.number{color:#c76b29}.token.punctuation{color:#525252}.token.property{color:#c08b30}.token.tag{color:#2973b7}.token.string{color:var(--theme-color,#42b983)}.token.selector{color:#6679cc}.token.attr-name{color:#2973b7}.language-css .token.string,.style .token.string,.token.entity,.token.url{color:#22a2c9}.token.attr-value,.token.control,.token.directive,.token.unit{color:var(--theme-color,#42b983)}.token.function,.token.keyword{color:#e96900}.token.atrule,.token.regex,.token.statement{color:#22a2c9}.token.placeholder,.token.variable{color:#3d8fd1}.token.deleted{text-decoration:line-through}.token.inserted{border-bottom:1px dotted #202746;text-decoration:none}.token.italic{font-style:italic}.token.bold,.token.important{font-weight:700}.token.important{color:#c94922}.token.entity{cursor:help}.markdown-section pre>code{-moz-osx-font-smoothing:initial;-webkit-font-smoothing:initial;background-color:#f8f8f8;border-radius:2px;color:#525252;display:block;font-family:Roboto Mono,Monaco,courier,monospace;font-size:.8rem;line-height:inherit;margin:0 2px;max-width:inherit;overflow:inherit;padding:2.2em 5px;white-space:inherit}.markdown-section code:after,.markdown-section code:before{letter-spacing:.05rem}code .token{-moz-osx-font-smoothing:initial;-webkit-font-smoothing:initial;min-height:1.5rem;position:relative;left:auto}pre:after{color:#ccc;content:attr(data-lang);font-size:.6rem;font-weight:600;height:15px;line-height:15px;padding:5px 10px 0;position:absolute;right:0;text-align:right;top:0} +body:not(.ready) { + overflow: hidden; +} +body:not(.ready) .app-nav, +body:not(.ready) > nav, +body:not(.ready) [data-cloak] { + display: none; +} +div#app { + font-size: 30px; + font-weight: lighter; + margin: 40vh auto; + text-align: center; +} +div#app:empty:before { + content: 'Loading...'; +} +.emoji { + height: 1.2rem; + vertical-align: middle; +} +.progress { + background-color: var(--theme-color, #42b983); + height: 2px; + left: 0; + position: fixed; + right: 0; + top: 0; + transition: width 0.2s, opacity 0.4s; + width: 0; + z-index: 999999; +} +.search .search-keyword, +.search a:hover { + color: var(--theme-color, #42b983); +} +.search .search-keyword { + font-style: normal; + font-weight: 700; +} +body, +html { + height: 100%; +} +body { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + color: #34495e; + font-family: Source Sans Pro, Helvetica Neue, Arial, sans-serif; + font-size: 15px; + letter-spacing: 0; + margin: 0; + overflow-x: hidden; +} +img { + max-width: 100%; +} +a[disabled] { + cursor: not-allowed; + opacity: 0.6; +} +kbd { + border: 1px solid #ccc; + border-radius: 3px; + display: inline-block; + font-size: 12px !important; + line-height: 12px; + margin-bottom: 3px; + padding: 3px 5px; + vertical-align: middle; +} +li input[type='checkbox'] { + margin: 0 0.2em 0.25em 0; + vertical-align: middle; +} +.app-nav { + margin: 25px 60px 0 0; + position: absolute; + right: 0; + text-align: right; + z-index: 10; +} +.app-nav.no-badge { + margin-right: 25px; +} +.app-nav p { + margin: 0; +} +.app-nav > a { + margin: 0 1rem; + padding: 5px 0; +} +.app-nav li, +.app-nav ul { + display: inline-block; + list-style: none; + margin: 0; +} +.app-nav a { + color: inherit; + font-size: 16px; + text-decoration: none; + transition: color 0.3s; +} +.app-nav a.active, +.app-nav a:hover { + color: var(--theme-color, #42b983); +} +.app-nav a.active { + border-bottom: 2px solid var(--theme-color, #42b983); +} +.app-nav li { + display: inline-block; + margin: 0 1rem; + padding: 5px 0; + position: relative; + cursor: pointer; +} +.app-nav li ul { + background-color: #fff; + border: 1px solid; + border-color: #ddd #ddd #ccc; + border-radius: 4px; + box-sizing: border-box; + display: none; + max-height: calc(100vh - 61px); + overflow-y: auto; + padding: 10px 0; + position: absolute; + right: -15px; + text-align: left; + top: 100%; + white-space: nowrap; +} +.app-nav li ul li { + display: block; + font-size: 14px; + line-height: 1rem; + margin: 8px 14px; + white-space: nowrap; +} +.app-nav li ul a { + display: block; + font-size: inherit; + margin: 0; + padding: 0; +} +.app-nav li ul a.active { + border-bottom: 0; +} +.app-nav li:hover ul { + display: block; +} +.github-corner { + border-bottom: 0; + position: fixed; + right: 0; + text-decoration: none; + top: 0; + z-index: 1; +} +.github-corner:hover .octo-arm { + -webkit-animation: octocat-wave 0.56s ease-in-out; + animation: octocat-wave 0.56s ease-in-out; +} +.github-corner svg { + color: #fff; + fill: var(--theme-color, #42b983); + height: 80px; + width: 80px; +} +main { + display: block; + position: relative; + width: 100vw; + height: 100%; + z-index: 0; +} +main.hidden { + display: none; +} +.anchor { + display: inline-block; + text-decoration: none; + transition: all 0.3s; +} +.anchor span { + color: #34495e; +} +.anchor:hover { + text-decoration: underline; +} +.sidebar { + border-right: 1px solid rgba(0, 0, 0, 0.07); + overflow-y: auto; + padding: 40px 0 0; + position: absolute; + top: 0; + bottom: 0; + left: 0; + transition: transform 0.25s ease-out; + width: 300px; + z-index: 20; +} +.sidebar > h1 { + margin: 0 auto 1rem; + font-size: 1.5rem; + font-weight: 300; + text-align: center; +} +.sidebar > h1 a { + color: inherit; + text-decoration: none; +} +.sidebar > h1 .app-nav { + display: block; + position: static; +} +.sidebar .sidebar-nav { + line-height: 2em; + padding-bottom: 40px; +} +.sidebar li.collapse .app-sub-sidebar { + display: none; +} +.sidebar ul { + margin: 0 0 0 15px; + padding: 0; +} +.sidebar li > p { + font-weight: 700; + margin: 0; +} +.sidebar ul, +.sidebar ul li { + list-style: none; +} +.sidebar ul li a { + border-bottom: none; + display: block; +} +.sidebar ul li ul { + padding-left: 20px; +} +.sidebar::-webkit-scrollbar { + width: 4px; +} +.sidebar::-webkit-scrollbar-thumb { + background: transparent; + border-radius: 4px; +} +.sidebar:hover::-webkit-scrollbar-thumb { + background: hsla(0, 0%, 53.3%, 0.4); +} +.sidebar:hover::-webkit-scrollbar-track { + background: hsla(0, 0%, 53.3%, 0.1); +} +.sidebar-toggle { + background-color: transparent; + background-color: hsla(0, 0%, 100%, 0.8); + border: 0; + outline: none; + padding: 10px; + position: absolute; + bottom: 0; + left: 0; + text-align: center; + transition: opacity 0.3s; + width: 284px; + z-index: 30; + cursor: pointer; +} +.sidebar-toggle:hover .sidebar-toggle-button { + opacity: 0.4; +} +.sidebar-toggle span { + background-color: var(--theme-color, #42b983); + display: block; + margin-bottom: 4px; + width: 16px; + height: 2px; +} +body.sticky .sidebar, +body.sticky .sidebar-toggle { + position: fixed; +} +.content { + padding-top: 60px; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 300px; + transition: left 0.25s ease; +} +.markdown-section { + margin: 0 auto; + max-width: 80%; + padding: 30px 15px 40px; + position: relative; +} +.markdown-section > * { + box-sizing: border-box; + font-size: inherit; +} +.markdown-section > :first-child { + margin-top: 0 !important; +} +.markdown-section hr { + border: none; + border-bottom: 1px solid #eee; + margin: 2em 0; +} +.markdown-section iframe { + border: 1px solid #eee; + width: 1px; + min-width: 100%; +} +.markdown-section table { + border-collapse: collapse; + border-spacing: 0; + display: block; + margin-bottom: 1rem; + overflow: auto; + width: 100%; +} +.markdown-section th { + font-weight: 700; +} +.markdown-section td, +.markdown-section th { + border: 1px solid #ddd; + padding: 6px 13px; +} +.markdown-section tr { + border-top: 1px solid #ccc; +} +.markdown-section p.tip, +.markdown-section tr:nth-child(2n) { + background-color: #f8f8f8; +} +.markdown-section p.tip { + border-bottom-right-radius: 2px; + border-left: 4px solid #f66; + border-top-right-radius: 2px; + margin: 2em 0; + padding: 12px 24px 12px 30px; + position: relative; +} +.markdown-section p.tip:before { + background-color: #f66; + border-radius: 100%; + color: #fff; + content: '!'; + font-family: Dosis, Source Sans Pro, Helvetica Neue, Arial, sans-serif; + font-size: 14px; + font-weight: 700; + left: -12px; + line-height: 20px; + position: absolute; + height: 20px; + width: 20px; + text-align: center; + top: 14px; +} +.markdown-section p.tip code { + background-color: #efefef; +} +.markdown-section p.tip em { + color: #34495e; +} +.markdown-section p.warn { + background: rgba(66, 185, 131, 0.1); + border-radius: 2px; + padding: 1rem; +} +.markdown-section ul.task-list > li { + list-style-type: none; +} +body.close .sidebar { + transform: translateX(-300px); +} +body.close .sidebar-toggle { + width: auto; +} +body.close .content { + left: 0; +} +@media print { + .app-nav, + .github-corner, + .sidebar, + .sidebar-toggle { + display: none; + } +} +@media screen and (max-width: 768px) { + .github-corner, + .sidebar, + .sidebar-toggle { + position: fixed; + } + .app-nav { + margin-top: 16px; + } + .app-nav li ul { + top: 30px; + } + main { + height: auto; + overflow-x: hidden; + } + .sidebar { + left: -300px; + transition: transform 0.25s ease-out; + } + .content { + left: 0; + max-width: 100vw; + position: static; + padding-top: 20px; + transition: transform 0.25s ease; + } + .app-nav, + .github-corner { + transition: transform 0.25s ease-out; + } + .sidebar-toggle { + background-color: transparent; + width: auto; + padding: 30px 30px 10px 10px; + } + body.close .sidebar { + transform: translateX(300px); + } + body.close .sidebar-toggle { + background-color: hsla(0, 0%, 100%, 0.8); + transition: background-color 1s; + width: 284px; + padding: 10px; + } + body.close .content { + transform: translateX(300px); + } + body.close .app-nav, + body.close .github-corner { + display: none; + } + .github-corner:hover .octo-arm { + -webkit-animation: none; + animation: none; + } + .github-corner .octo-arm { + -webkit-animation: octocat-wave 0.56s ease-in-out; + animation: octocat-wave 0.56s ease-in-out; + } +} +@-webkit-keyframes octocat-wave { + 0%, + to { + transform: rotate(0); + } + 20%, + 60% { + transform: rotate(-25deg); + } + 40%, + 80% { + transform: rotate(10deg); + } +} +@keyframes octocat-wave { + 0%, + to { + transform: rotate(0); + } + 20%, + 60% { + transform: rotate(-25deg); + } + 40%, + 80% { + transform: rotate(10deg); + } +} +section.cover { + align-items: center; + background-position: 50%; + background-repeat: no-repeat; + background-size: cover; + height: 100vh; + width: 100vw; + display: none; +} +section.cover.show { + display: flex; +} +section.cover.has-mask .mask { + background-color: #fff; + opacity: 0.8; + position: absolute; + top: 0; + height: 100%; + width: 100%; +} +section.cover .cover-main { + flex: 1; + margin: -20px 16px 0; + text-align: center; +} +section.cover a { + color: inherit; +} +section.cover a, +section.cover a:hover { + text-decoration: none; +} +section.cover p { + line-height: 1.5rem; + margin: 1em 0; +} +section.cover h1 { + color: inherit; + font-size: 2.5rem; + font-weight: 300; + margin: 0.625rem 0 2.5rem; + position: relative; + text-align: center; +} +section.cover h1 a { + display: block; +} +section.cover h1 small { + bottom: -0.4375rem; + font-size: 1rem; + position: absolute; +} +section.cover blockquote { + font-size: 1.5rem; + text-align: center; +} +section.cover ul { + line-height: 1.8; + list-style-type: none; + margin: 1em auto; + max-width: 500px; + padding: 0; +} +section.cover .cover-main > p:last-child a { + border-radius: 2rem; + border: 1px solid var(--theme-color, #42b983); + box-sizing: border-box; + color: var(--theme-color, #42b983); + display: inline-block; + font-size: 1.05rem; + letter-spacing: 0.1rem; + margin: 0.5rem 1rem; + padding: 0.75em 2rem; + text-decoration: none; + transition: all 0.15s ease; +} +section.cover .cover-main > p:last-child a:last-child { + background-color: var(--theme-color, #42b983); + color: #fff; +} +section.cover .cover-main > p:last-child a:last-child:hover { + color: inherit; + opacity: 0.8; +} +section.cover .cover-main > p:last-child a:hover { + color: inherit; +} +section.cover blockquote > p > a { + border-bottom: 2px solid var(--theme-color, #42b983); + transition: color 0.3s; +} +section.cover blockquote > p > a:hover { + color: var(--theme-color, #42b983); +} +.sidebar, +body { + background-color: #fff; +} +.sidebar { + color: #364149; +} +.sidebar li { + margin: 6px 0; +} +.sidebar ul li a { + color: #505d6b; + font-size: 14px; + font-weight: 400; + overflow: hidden; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; +} +.sidebar ul li a:hover { + text-decoration: underline; +} +.sidebar ul li ul { + padding: 0; +} +.sidebar ul li.active > a { + border-right: 2px solid; + color: var(--theme-color, #42b983); + font-weight: 600; +} +.app-sub-sidebar li:before { + content: '-'; + padding-right: 4px; + float: left; +} +.markdown-section h1, +.markdown-section h2, +.markdown-section h3, +.markdown-section h4, +.markdown-section strong { + color: #2c3e50; + font-weight: 600; +} +.markdown-section a { + color: var(--theme-color, #42b983); + font-weight: 600; +} +.markdown-section h1 { + font-size: 2rem; + margin: 0 0 1rem; +} +.markdown-section h2 { + font-size: 1.75rem; + margin: 45px 0 0.8rem; +} +.markdown-section h3 { + font-size: 1.5rem; + margin: 40px 0 0.6rem; +} +.markdown-section h4 { + font-size: 1.25rem; +} +.markdown-section h5 { + font-size: 1rem; +} +.markdown-section h6 { + color: #777; + font-size: 1rem; +} +.markdown-section figure, +.markdown-section p { + margin: 1.2em 0; +} +.markdown-section ol, +.markdown-section p, +.markdown-section ul { + line-height: 1.6rem; + word-spacing: 0.05rem; +} +.markdown-section ol, +.markdown-section ul { + padding-left: 1.5rem; +} +.markdown-section blockquote { + border-left: 4px solid var(--theme-color, #42b983); + color: #858585; + margin: 2em 0; + padding-left: 20px; +} +.markdown-section blockquote p { + font-weight: 600; + margin-left: 0; +} +.markdown-section iframe { + margin: 1em 0; +} +.markdown-section em { + color: #7f8c8d; +} +.markdown-section code { + border-radius: 2px; + color: #e96900; + font-size: 0.8rem; + margin: 0 2px; + padding: 3px 5px; + white-space: pre-wrap; +} +.markdown-section code, +.markdown-section pre { + background-color: #f8f8f8; + font-family: Roboto Mono, Monaco, courier, monospace; +} +.markdown-section pre { + -moz-osx-font-smoothing: initial; + -webkit-font-smoothing: initial; + line-height: 1.5rem; + margin: 1.2em 0; + overflow: auto; + padding: 0 1.4rem; + position: relative; + word-wrap: normal; +} +.token.cdata, +.token.comment, +.token.doctype, +.token.prolog { + color: #8e908c; +} +.token.namespace { + opacity: 0.7; +} +.token.boolean, +.token.number { + color: #c76b29; +} +.token.punctuation { + color: #525252; +} +.token.property { + color: #c08b30; +} +.token.tag { + color: #2973b7; +} +.token.string { + color: var(--theme-color, #42b983); +} +.token.selector { + color: #6679cc; +} +.token.attr-name { + color: #2973b7; +} +.language-css .token.string, +.style .token.string, +.token.entity, +.token.url { + color: #22a2c9; +} +.token.attr-value, +.token.control, +.token.directive, +.token.unit { + color: var(--theme-color, #42b983); +} +.token.function, +.token.keyword { + color: #e96900; +} +.token.atrule, +.token.regex, +.token.statement { + color: #22a2c9; +} +.token.placeholder, +.token.variable { + color: #3d8fd1; +} +.token.deleted { + text-decoration: line-through; +} +.token.inserted { + border-bottom: 1px dotted #202746; + text-decoration: none; +} +.token.italic { + font-style: italic; +} +.token.bold, +.token.important { + font-weight: 700; +} +.token.important { + color: #c94922; +} +.token.entity { + cursor: help; +} +.markdown-section pre > code { + -moz-osx-font-smoothing: initial; + -webkit-font-smoothing: initial; + background-color: #f8f8f8; + border-radius: 2px; + color: #525252; + display: block; + font-family: Roboto Mono, Monaco, courier, monospace; + font-size: 0.8rem; + line-height: inherit; + margin: 0 2px; + max-width: inherit; + overflow: inherit; + padding: 2.2em 5px; + white-space: inherit; +} +.markdown-section code:after, +.markdown-section code:before { + letter-spacing: 0.05rem; +} +code .token { + -moz-osx-font-smoothing: initial; + -webkit-font-smoothing: initial; + min-height: 1.5rem; + position: relative; + left: auto; +} +pre:after { + color: #ccc; + content: attr(data-lang); + font-size: 0.6rem; + font-weight: 600; + height: 15px; + line-height: 15px; + padding: 5px 10px 0; + position: absolute; + right: 0; + text-align: right; + top: 0; +} diff --git a/src/docs/theme_themed.css b/src/docs/theme_themed.css index cce96ad87..9cb520ed7 100644 --- a/src/docs/theme_themed.css +++ b/src/docs/theme_themed.css @@ -1,10 +1,1653 @@ -@import url("https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600");*{-webkit-font-smoothing:antialiased;-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:none;-webkit-touch-callout:none;box-sizing:border-box} +@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600'); +* { + -webkit-font-smoothing: antialiased; + -webkit-overflow-scrolling: touch; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-text-size-adjust: none; + -webkit-touch-callout: none; + box-sizing: border-box; +} @media (prefers-color-scheme: dark2) { - body:not(.ready){overflow:hidden}body:not(.ready) .app-nav,body:not(.ready)>nav,body:not(.ready) [data-cloak]{display:none}div#app{font-size:30px;font-weight:lighter;margin:40vh auto;text-align:center}div#app:empty:before{content:"Loading..."}.emoji{height:1.2rem;vertical-align:middle}.progress{background-color:var(--theme-color,#ea6f5a);height:2px;left:0;position:fixed;right:0;top:0;transition:width .2s,opacity .4s;width:0;z-index:999999}.search .search-keyword,.search a:hover{color:var(--theme-color,#ea6f5a)}.search .search-keyword{font-style:normal;font-weight:700}body,html{height:100%}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:#c8c8c8;font-family:Source Sans Pro,Helvetica Neue,Arial,sans-serif;font-size:15px;letter-spacing:0;margin:0;overflow-x:hidden}img{max-width:100%}a[disabled]{cursor:not-allowed;opacity:.6}kbd{border:1px solid #ccc;border-radius:3px;display:inline-block;font-size:12px!important;line-height:12px;margin-bottom:3px;padding:3px 5px;vertical-align:middle}li input[type=checkbox]{margin:0 .2em .25em 0;vertical-align:middle}.app-nav{margin:25px 60px 0 0;position:absolute;right:0;text-align:right;z-index:10}.app-nav.no-badge{margin-right:25px}.app-nav p{margin:0}.app-nav>a{margin:0 1rem;padding:5px 0}.app-nav li,.app-nav ul{display:inline-block;list-style:none;margin:0}.app-nav a{color:inherit;font-size:16px;text-decoration:none;transition:color .3s}.app-nav a.active,.app-nav a:hover{color:var(--theme-color,#ea6f5a)}.app-nav a.active{border-bottom:2px solid var(--theme-color,#ea6f5a)}.app-nav li{display:inline-block;margin:0 1rem;padding:5px 0;position:relative;cursor:pointer}.app-nav li ul{background-color:#fff;border:1px solid;border-color:#ddd #ddd #ccc;border-radius:4px;box-sizing:border-box;display:none;max-height:calc(100vh - 61px);overflow-y:auto;padding:10px 0;position:absolute;right:-15px;text-align:left;top:100%;white-space:nowrap}.app-nav li ul li{display:block;font-size:14px;line-height:1rem;margin:8px 14px;white-space:nowrap}.app-nav li ul a{display:block;font-size:inherit;margin:0;padding:0}.app-nav li ul a.active{border-bottom:0}.app-nav li:hover ul{display:block}.github-corner{border-bottom:0;position:fixed;right:0;text-decoration:none;top:0;z-index:1}.github-corner:hover .octo-arm{-webkit-animation:octocat-wave .56s ease-in-out;animation:octocat-wave .56s ease-in-out}.github-corner svg{color:#3f3f3f;fill:var(--theme-color,#ea6f5a);height:80px;width:80px}main{display:block;position:relative;width:100vw;height:100%;z-index:0}main.hidden{display:none}.anchor{display:inline-block;text-decoration:none;transition:all .3s}.anchor span{color:#c8c8c8}.anchor:hover{text-decoration:underline}.sidebar{border-right:1px solid rgba(0,0,0,.07);overflow-y:auto;padding:40px 0 0;position:absolute;top:0;bottom:0;left:0;transition:transform .25s ease-out;width:300px;z-index:20}.sidebar>h1{margin:0 auto 1rem;font-size:1.5rem;font-weight:300;text-align:center}.sidebar>h1 a{color:inherit;text-decoration:none}.sidebar>h1 .app-nav{display:block;position:static}.sidebar .sidebar-nav{line-height:2em;padding-bottom:40px}.sidebar li.collapse .app-sub-sidebar{display:none}.sidebar ul{margin:0 0 0 15px;padding:0}.sidebar li>p{font-weight:700;margin:0}.sidebar ul,.sidebar ul li{list-style:none}.sidebar ul li a{border-bottom:none;display:block}.sidebar ul li ul{padding-left:20px}.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-thumb{background:transparent;border-radius:4px}.sidebar:hover::-webkit-scrollbar-thumb{background:hsla(0,0%,53.3%,.4)}.sidebar:hover::-webkit-scrollbar-track{background:hsla(0,0%,53.3%,.1)}.sidebar-toggle{background-color:transparent;background-color:rgba(63,63,63,.8);border:0;outline:none;padding:10px;position:absolute;bottom:0;left:0;text-align:center;transition:opacity .3s;width:284px;z-index:30;cursor:pointer}.sidebar-toggle:hover .sidebar-toggle-button{opacity:.4}.sidebar-toggle span{background-color:var(--theme-color,#ea6f5a);display:block;margin-bottom:4px;width:16px;height:2px}body.sticky .sidebar,body.sticky .sidebar-toggle{position:fixed}.content{padding-top:60px;position:absolute;top:0;right:0;bottom:0;left:300px;transition:left .25s ease}.markdown-section{margin:0 auto;max-width:80%;padding:30px 15px 40px;position:relative}.markdown-section>*{box-sizing:border-box;font-size:inherit}.markdown-section>:first-child{margin-top:0!important}.markdown-section hr{border:none;border-bottom:1px solid #eee;margin:2em 0}.markdown-section iframe{border:1px solid #eee;width:1px;min-width:100%}.markdown-section table{border-collapse:collapse;border-spacing:0;display:block;margin-bottom:1rem;overflow:auto;width:100%}.markdown-section th{font-weight:700}.markdown-section td,.markdown-section th{border:1px solid #ddd;padding:6px 13px}.markdown-section tr{border-top:1px solid #ccc}.markdown-section p.tip,.markdown-section tr:nth-child(2n){background-color:#f8f8f8}.markdown-section p.tip{border-bottom-right-radius:2px;border-left:4px solid #f66;border-top-right-radius:2px;margin:2em 0;padding:12px 24px 12px 30px;position:relative}.markdown-section p.tip:before{background-color:#f66;border-radius:100%;color:#3f3f3f;content:"!";font-family:Dosis,Source Sans Pro,Helvetica Neue,Arial,sans-serif;font-size:14px;font-weight:700;left:-12px;line-height:20px;position:absolute;height:20px;width:20px;text-align:center;top:14px}.markdown-section p.tip code{background-color:#efefef}.markdown-section p.tip em{color:#c8c8c8}.markdown-section p.warn{background:rgba(234,111,90,.1);border-radius:2px;padding:1rem}.markdown-section ul.task-list>li{list-style-type:none}body.close .sidebar{transform:translateX(-300px)}body.close .sidebar-toggle{width:auto}body.close .content{left:0}@media print{.app-nav,.github-corner,.sidebar,.sidebar-toggle{display:none}}@media screen and (max-width:768px){.github-corner,.sidebar,.sidebar-toggle{position:fixed}.app-nav{margin-top:16px}.app-nav li ul{top:30px}main{height:auto;overflow-x:hidden}.sidebar{left:-300px;transition:transform .25s ease-out}.content{left:0;max-width:100vw;position:static;padding-top:20px;transition:transform .25s ease}.app-nav,.github-corner{transition:transform .25s ease-out}.sidebar-toggle{background-color:transparent;width:auto;padding:30px 30px 10px 10px}body.close .sidebar{transform:translateX(300px)}body.close .sidebar-toggle{background-color:rgba(63,63,63,.8);transition:background-color 1s;width:284px;padding:10px}body.close .content{transform:translateX(300px)}body.close .app-nav,body.close .github-corner{display:none}.github-corner:hover .octo-arm{-webkit-animation:none;animation:none}.github-corner .octo-arm{-webkit-animation:octocat-wave .56s ease-in-out;animation:octocat-wave .56s ease-in-out}}@-webkit-keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}section.cover{align-items:center;background-position:50%;background-repeat:no-repeat;background-size:cover;height:100vh;width:100vw;display:none}section.cover.show{display:flex}section.cover.has-mask .mask{background-color:#3f3f3f;opacity:.8;position:absolute;top:0;height:100%;width:100%}section.cover .cover-main{flex:1;margin:-20px 16px 0;text-align:center}section.cover a{color:inherit}section.cover a,section.cover a:hover{text-decoration:none}section.cover p{line-height:1.5rem;margin:1em 0}section.cover h1{color:inherit;font-size:2.5rem;font-weight:300;margin:.625rem 0 2.5rem;position:relative;text-align:center}section.cover h1 a{display:block}section.cover h1 small{bottom:-.4375rem;font-size:1rem;position:absolute}section.cover blockquote{font-size:1.5rem;text-align:center}section.cover ul{line-height:1.8;list-style-type:none;margin:1em auto;max-width:500px;padding:0}section.cover .cover-main>p:last-child a{border-radius:2rem;border:1px solid var(--theme-color,#ea6f5a);box-sizing:border-box;color:var(--theme-color,#ea6f5a);display:inline-block;font-size:1.05rem;letter-spacing:.1rem;margin:.5rem 1rem;padding:.75em 2rem;text-decoration:none;transition:all .15s ease}section.cover .cover-main>p:last-child a:last-child{background-color:var(--theme-color,#ea6f5a);color:#fff}section.cover .cover-main>p:last-child a:last-child:hover{color:inherit;opacity:.8}section.cover .cover-main>p:last-child a:hover{color:inherit}section.cover blockquote>p>a{border-bottom:2px solid var(--theme-color,#ea6f5a);transition:color .3s}section.cover blockquote>p>a:hover{color:var(--theme-color,#ea6f5a)}.sidebar,body{background-color:#3f3f3f}.sidebar{color:#c8c8c8}.sidebar li{margin:6px 15px 6px 0}.sidebar ul li a{color:#c8c8c8;font-size:14px;overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.sidebar ul li a:hover{text-decoration:underline}.sidebar ul li ul{padding:0}.sidebar ul li.active>a{color:var(--theme-color,#ea6f5a);font-weight:600}.markdown-section h1,.markdown-section h2,.markdown-section h3,.markdown-section h4,.markdown-section strong{color:#657b83;font-weight:600}.markdown-section a{color:var(--theme-color,#ea6f5a);font-weight:600}.markdown-section h1{font-size:2rem;margin:0 0 1rem}.markdown-section h2{font-size:1.75rem;margin:45px 0 .8rem}.markdown-section h3{font-size:1.5rem;margin:40px 0 .6rem}.markdown-section h4{font-size:1.25rem}.markdown-section h5{font-size:1rem}.markdown-section h6{color:#777;font-size:1rem}.markdown-section figure,.markdown-section ol,.markdown-section p,.markdown-section ul{margin:1.2em 0}.markdown-section ol,.markdown-section p,.markdown-section ul{line-height:1.6rem;word-spacing:.05rem}.markdown-section ol,.markdown-section ul{padding-left:1.5rem}.markdown-section blockquote{border-left:4px solid var(--theme-color,#ea6f5a);color:#858585;margin:2em 0;padding-left:20px}.markdown-section blockquote p{font-weight:600;margin-left:0}.markdown-section iframe{margin:1em 0}.markdown-section em{color:#7f8c8d}.markdown-section code{border-radius:2px;color:#657b83;font-size:.8rem;margin:0 2px;padding:3px 5px;white-space:pre-wrap}.markdown-section code,.markdown-section pre{background-color:#282828;font-family:Roboto Mono,Monaco,courier,monospace}.markdown-section pre{-moz-osx-font-smoothing:initial;-webkit-font-smoothing:initial;line-height:1.5rem;margin:1.2em 0;overflow:auto;padding:0 1.4rem;position:relative;word-wrap:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8e908c}.token.namespace{opacity:.7}.token.boolean,.token.number{color:#c76b29}.token.punctuation{color:#525252}.token.property{color:#c08b30}.token.tag{color:#2973b7}.token.string{color:var(--theme-color,#ea6f5a)}.token.selector{color:#6679cc}.token.attr-name{color:#2973b7}.language-css .token.string,.style .token.string,.token.entity,.token.url{color:#22a2c9}.token.attr-value,.token.control,.token.directive,.token.unit{color:var(--theme-color,#ea6f5a)}.token.keyword{color:#e96900}.token.atrule,.token.regex,.token.statement{color:#22a2c9}.token.placeholder,.token.variable{color:#3d8fd1}.token.deleted{text-decoration:line-through}.token.inserted{border-bottom:1px dotted #202746;text-decoration:none}.token.italic{font-style:italic}.token.bold,.token.important{font-weight:700}.token.important{color:#c94922}.token.entity{cursor:help}.markdown-section pre>code{-moz-osx-font-smoothing:initial;-webkit-font-smoothing:initial;background-color:#282828;border-radius:2px;color:#657b83;display:block;font-family:Roboto Mono,Monaco,courier,monospace;font-size:.8rem;line-height:inherit;margin:0 2px;max-width:inherit;overflow:inherit;padding:2.2em 5px;white-space:inherit}.markdown-section code:after,.markdown-section code:before{letter-spacing:.05rem}code .token{-moz-osx-font-smoothing:initial;-webkit-font-smoothing:initial;min-height:1.5rem;position:relative;left:auto}pre:after{color:#ccc;content:attr(data-lang);font-size:.6rem;font-weight:600;height:15px;line-height:15px;padding:5px 10px 0;position:absolute;right:0;text-align:right;top:0}.markdown-section p.tip{background-color:#282828;color:#657b83}input[type=search]{background:#4f4f4f;border-color:#4f4f4f;color:#c8c8c8} + body:not(.ready) { + overflow: hidden; + } + body:not(.ready) .app-nav, + body:not(.ready) > nav, + body:not(.ready) [data-cloak] { + display: none; + } + div#app { + font-size: 30px; + font-weight: lighter; + margin: 40vh auto; + text-align: center; + } + div#app:empty:before { + content: 'Loading...'; + } + .emoji { + height: 1.2rem; + vertical-align: middle; + } + .progress { + background-color: var(--theme-color, #ea6f5a); + height: 2px; + left: 0; + position: fixed; + right: 0; + top: 0; + transition: width 0.2s, opacity 0.4s; + width: 0; + z-index: 999999; + } + .search .search-keyword, + .search a:hover { + color: var(--theme-color, #ea6f5a); + } + .search .search-keyword { + font-style: normal; + font-weight: 700; + } + body, + html { + height: 100%; + } + body { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + color: #c8c8c8; + font-family: Source Sans Pro, Helvetica Neue, Arial, sans-serif; + font-size: 15px; + letter-spacing: 0; + margin: 0; + overflow-x: hidden; + } + img { + max-width: 100%; + } + a[disabled] { + cursor: not-allowed; + opacity: 0.6; + } + kbd { + border: 1px solid #ccc; + border-radius: 3px; + display: inline-block; + font-size: 12px !important; + line-height: 12px; + margin-bottom: 3px; + padding: 3px 5px; + vertical-align: middle; + } + li input[type='checkbox'] { + margin: 0 0.2em 0.25em 0; + vertical-align: middle; + } + .app-nav { + margin: 25px 60px 0 0; + position: absolute; + right: 0; + text-align: right; + z-index: 10; + } + .app-nav.no-badge { + margin-right: 25px; + } + .app-nav p { + margin: 0; + } + .app-nav > a { + margin: 0 1rem; + padding: 5px 0; + } + .app-nav li, + .app-nav ul { + display: inline-block; + list-style: none; + margin: 0; + } + .app-nav a { + color: inherit; + font-size: 16px; + text-decoration: none; + transition: color 0.3s; + } + .app-nav a.active, + .app-nav a:hover { + color: var(--theme-color, #ea6f5a); + } + .app-nav a.active { + border-bottom: 2px solid var(--theme-color, #ea6f5a); + } + .app-nav li { + display: inline-block; + margin: 0 1rem; + padding: 5px 0; + position: relative; + cursor: pointer; + } + .app-nav li ul { + background-color: #fff; + border: 1px solid; + border-color: #ddd #ddd #ccc; + border-radius: 4px; + box-sizing: border-box; + display: none; + max-height: calc(100vh - 61px); + overflow-y: auto; + padding: 10px 0; + position: absolute; + right: -15px; + text-align: left; + top: 100%; + white-space: nowrap; + } + .app-nav li ul li { + display: block; + font-size: 14px; + line-height: 1rem; + margin: 8px 14px; + white-space: nowrap; + } + .app-nav li ul a { + display: block; + font-size: inherit; + margin: 0; + padding: 0; + } + .app-nav li ul a.active { + border-bottom: 0; + } + .app-nav li:hover ul { + display: block; + } + .github-corner { + border-bottom: 0; + position: fixed; + right: 0; + text-decoration: none; + top: 0; + z-index: 1; + } + .github-corner:hover .octo-arm { + -webkit-animation: octocat-wave 0.56s ease-in-out; + animation: octocat-wave 0.56s ease-in-out; + } + .github-corner svg { + color: #3f3f3f; + fill: var(--theme-color, #ea6f5a); + height: 80px; + width: 80px; + } + main { + display: block; + position: relative; + width: 100vw; + height: 100%; + z-index: 0; + } + main.hidden { + display: none; + } + .anchor { + display: inline-block; + text-decoration: none; + transition: all 0.3s; + } + .anchor span { + color: #c8c8c8; + } + .anchor:hover { + text-decoration: underline; + } + .sidebar { + border-right: 1px solid rgba(0, 0, 0, 0.07); + overflow-y: auto; + padding: 40px 0 0; + position: absolute; + top: 0; + bottom: 0; + left: 0; + transition: transform 0.25s ease-out; + width: 300px; + z-index: 20; + } + .sidebar > h1 { + margin: 0 auto 1rem; + font-size: 1.5rem; + font-weight: 300; + text-align: center; + } + .sidebar > h1 a { + color: inherit; + text-decoration: none; + } + .sidebar > h1 .app-nav { + display: block; + position: static; + } + .sidebar .sidebar-nav { + line-height: 2em; + padding-bottom: 40px; + } + .sidebar li.collapse .app-sub-sidebar { + display: none; + } + .sidebar ul { + margin: 0 0 0 15px; + padding: 0; + } + .sidebar li > p { + font-weight: 700; + margin: 0; + } + .sidebar ul, + .sidebar ul li { + list-style: none; + } + .sidebar ul li a { + border-bottom: none; + display: block; + } + .sidebar ul li ul { + padding-left: 20px; + } + .sidebar::-webkit-scrollbar { + width: 4px; + } + .sidebar::-webkit-scrollbar-thumb { + background: transparent; + border-radius: 4px; + } + .sidebar:hover::-webkit-scrollbar-thumb { + background: hsla(0, 0%, 53.3%, 0.4); + } + .sidebar:hover::-webkit-scrollbar-track { + background: hsla(0, 0%, 53.3%, 0.1); + } + .sidebar-toggle { + background-color: transparent; + background-color: rgba(63, 63, 63, 0.8); + border: 0; + outline: none; + padding: 10px; + position: absolute; + bottom: 0; + left: 0; + text-align: center; + transition: opacity 0.3s; + width: 284px; + z-index: 30; + cursor: pointer; + } + .sidebar-toggle:hover .sidebar-toggle-button { + opacity: 0.4; + } + .sidebar-toggle span { + background-color: var(--theme-color, #ea6f5a); + display: block; + margin-bottom: 4px; + width: 16px; + height: 2px; + } + body.sticky .sidebar, + body.sticky .sidebar-toggle { + position: fixed; + } + .content { + padding-top: 60px; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 300px; + transition: left 0.25s ease; + } + .markdown-section { + margin: 0 auto; + max-width: 80%; + padding: 30px 15px 40px; + position: relative; + } + .markdown-section > * { + box-sizing: border-box; + font-size: inherit; + } + .markdown-section > :first-child { + margin-top: 0 !important; + } + .markdown-section hr { + border: none; + border-bottom: 1px solid #eee; + margin: 2em 0; + } + .markdown-section iframe { + border: 1px solid #eee; + width: 1px; + min-width: 100%; + } + .markdown-section table { + border-collapse: collapse; + border-spacing: 0; + display: block; + margin-bottom: 1rem; + overflow: auto; + width: 100%; + } + .markdown-section th { + font-weight: 700; + } + .markdown-section td, + .markdown-section th { + border: 1px solid #ddd; + padding: 6px 13px; + } + .markdown-section tr { + border-top: 1px solid #ccc; + } + .markdown-section p.tip, + .markdown-section tr:nth-child(2n) { + background-color: #f8f8f8; + } + .markdown-section p.tip { + border-bottom-right-radius: 2px; + border-left: 4px solid #f66; + border-top-right-radius: 2px; + margin: 2em 0; + padding: 12px 24px 12px 30px; + position: relative; + } + .markdown-section p.tip:before { + background-color: #f66; + border-radius: 100%; + color: #3f3f3f; + content: '!'; + font-family: Dosis, Source Sans Pro, Helvetica Neue, Arial, sans-serif; + font-size: 14px; + font-weight: 700; + left: -12px; + line-height: 20px; + position: absolute; + height: 20px; + width: 20px; + text-align: center; + top: 14px; + } + .markdown-section p.tip code { + background-color: #efefef; + } + .markdown-section p.tip em { + color: #c8c8c8; + } + .markdown-section p.warn { + background: rgba(234, 111, 90, 0.1); + border-radius: 2px; + padding: 1rem; + } + .markdown-section ul.task-list > li { + list-style-type: none; + } + body.close .sidebar { + transform: translateX(-300px); + } + body.close .sidebar-toggle { + width: auto; + } + body.close .content { + left: 0; + } + @media print { + .app-nav, + .github-corner, + .sidebar, + .sidebar-toggle { + display: none; + } + } + @media screen and (max-width: 768px) { + .github-corner, + .sidebar, + .sidebar-toggle { + position: fixed; + } + .app-nav { + margin-top: 16px; + } + .app-nav li ul { + top: 30px; + } + main { + height: auto; + overflow-x: hidden; + } + .sidebar { + left: -300px; + transition: transform 0.25s ease-out; + } + .content { + left: 0; + max-width: 100vw; + position: static; + padding-top: 20px; + transition: transform 0.25s ease; + } + .app-nav, + .github-corner { + transition: transform 0.25s ease-out; + } + .sidebar-toggle { + background-color: transparent; + width: auto; + padding: 30px 30px 10px 10px; + } + body.close .sidebar { + transform: translateX(300px); + } + body.close .sidebar-toggle { + background-color: rgba(63, 63, 63, 0.8); + transition: background-color 1s; + width: 284px; + padding: 10px; + } + body.close .content { + transform: translateX(300px); + } + body.close .app-nav, + body.close .github-corner { + display: none; + } + .github-corner:hover .octo-arm { + -webkit-animation: none; + animation: none; + } + .github-corner .octo-arm { + -webkit-animation: octocat-wave 0.56s ease-in-out; + animation: octocat-wave 0.56s ease-in-out; + } + } + @-webkit-keyframes octocat-wave { + 0%, + to { + transform: rotate(0); + } + 20%, + 60% { + transform: rotate(-25deg); + } + 40%, + 80% { + transform: rotate(10deg); + } + } + @keyframes octocat-wave { + 0%, + to { + transform: rotate(0); + } + 20%, + 60% { + transform: rotate(-25deg); + } + 40%, + 80% { + transform: rotate(10deg); + } + } + section.cover { + align-items: center; + background-position: 50%; + background-repeat: no-repeat; + background-size: cover; + height: 100vh; + width: 100vw; + display: none; + } + section.cover.show { + display: flex; + } + section.cover.has-mask .mask { + background-color: #3f3f3f; + opacity: 0.8; + position: absolute; + top: 0; + height: 100%; + width: 100%; + } + section.cover .cover-main { + flex: 1; + margin: -20px 16px 0; + text-align: center; + } + section.cover a { + color: inherit; + } + section.cover a, + section.cover a:hover { + text-decoration: none; + } + section.cover p { + line-height: 1.5rem; + margin: 1em 0; + } + section.cover h1 { + color: inherit; + font-size: 2.5rem; + font-weight: 300; + margin: 0.625rem 0 2.5rem; + position: relative; + text-align: center; + } + section.cover h1 a { + display: block; + } + section.cover h1 small { + bottom: -0.4375rem; + font-size: 1rem; + position: absolute; + } + section.cover blockquote { + font-size: 1.5rem; + text-align: center; + } + section.cover ul { + line-height: 1.8; + list-style-type: none; + margin: 1em auto; + max-width: 500px; + padding: 0; + } + section.cover .cover-main > p:last-child a { + border-radius: 2rem; + border: 1px solid var(--theme-color, #ea6f5a); + box-sizing: border-box; + color: var(--theme-color, #ea6f5a); + display: inline-block; + font-size: 1.05rem; + letter-spacing: 0.1rem; + margin: 0.5rem 1rem; + padding: 0.75em 2rem; + text-decoration: none; + transition: all 0.15s ease; + } + section.cover .cover-main > p:last-child a:last-child { + background-color: var(--theme-color, #ea6f5a); + color: #fff; + } + section.cover .cover-main > p:last-child a:last-child:hover { + color: inherit; + opacity: 0.8; + } + section.cover .cover-main > p:last-child a:hover { + color: inherit; + } + section.cover blockquote > p > a { + border-bottom: 2px solid var(--theme-color, #ea6f5a); + transition: color 0.3s; + } + section.cover blockquote > p > a:hover { + color: var(--theme-color, #ea6f5a); + } + .sidebar, + body { + background-color: #3f3f3f; + } + .sidebar { + color: #c8c8c8; + } + .sidebar li { + margin: 6px 15px 6px 0; + } + .sidebar ul li a { + color: #c8c8c8; + font-size: 14px; + overflow: hidden; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + } + .sidebar ul li a:hover { + text-decoration: underline; + } + .sidebar ul li ul { + padding: 0; + } + .sidebar ul li.active > a { + color: var(--theme-color, #ea6f5a); + font-weight: 600; + } + .markdown-section h1, + .markdown-section h2, + .markdown-section h3, + .markdown-section h4, + .markdown-section strong { + color: #657b83; + font-weight: 600; + } + .markdown-section a { + color: var(--theme-color, #ea6f5a); + font-weight: 600; + } + .markdown-section h1 { + font-size: 2rem; + margin: 0 0 1rem; + } + .markdown-section h2 { + font-size: 1.75rem; + margin: 45px 0 0.8rem; + } + .markdown-section h3 { + font-size: 1.5rem; + margin: 40px 0 0.6rem; + } + .markdown-section h4 { + font-size: 1.25rem; + } + .markdown-section h5 { + font-size: 1rem; + } + .markdown-section h6 { + color: #777; + font-size: 1rem; + } + .markdown-section figure, + .markdown-section ol, + .markdown-section p, + .markdown-section ul { + margin: 1.2em 0; + } + .markdown-section ol, + .markdown-section p, + .markdown-section ul { + line-height: 1.6rem; + word-spacing: 0.05rem; + } + .markdown-section ol, + .markdown-section ul { + padding-left: 1.5rem; + } + .markdown-section blockquote { + border-left: 4px solid var(--theme-color, #ea6f5a); + color: #858585; + margin: 2em 0; + padding-left: 20px; + } + .markdown-section blockquote p { + font-weight: 600; + margin-left: 0; + } + .markdown-section iframe { + margin: 1em 0; + } + .markdown-section em { + color: #7f8c8d; + } + .markdown-section code { + border-radius: 2px; + color: #657b83; + font-size: 0.8rem; + margin: 0 2px; + padding: 3px 5px; + white-space: pre-wrap; + } + .markdown-section code, + .markdown-section pre { + background-color: #282828; + font-family: Roboto Mono, Monaco, courier, monospace; + } + .markdown-section pre { + -moz-osx-font-smoothing: initial; + -webkit-font-smoothing: initial; + line-height: 1.5rem; + margin: 1.2em 0; + overflow: auto; + padding: 0 1.4rem; + position: relative; + word-wrap: normal; + } + .token.cdata, + .token.comment, + .token.doctype, + .token.prolog { + color: #8e908c; + } + .token.namespace { + opacity: 0.7; + } + .token.boolean, + .token.number { + color: #c76b29; + } + .token.punctuation { + color: #525252; + } + .token.property { + color: #c08b30; + } + .token.tag { + color: #2973b7; + } + .token.string { + color: var(--theme-color, #ea6f5a); + } + .token.selector { + color: #6679cc; + } + .token.attr-name { + color: #2973b7; + } + .language-css .token.string, + .style .token.string, + .token.entity, + .token.url { + color: #22a2c9; + } + .token.attr-value, + .token.control, + .token.directive, + .token.unit { + color: var(--theme-color, #ea6f5a); + } + .token.keyword { + color: #e96900; + } + .token.atrule, + .token.regex, + .token.statement { + color: #22a2c9; + } + .token.placeholder, + .token.variable { + color: #3d8fd1; + } + .token.deleted { + text-decoration: line-through; + } + .token.inserted { + border-bottom: 1px dotted #202746; + text-decoration: none; + } + .token.italic { + font-style: italic; + } + .token.bold, + .token.important { + font-weight: 700; + } + .token.important { + color: #c94922; + } + .token.entity { + cursor: help; + } + .markdown-section pre > code { + -moz-osx-font-smoothing: initial; + -webkit-font-smoothing: initial; + background-color: #282828; + border-radius: 2px; + color: #657b83; + display: block; + font-family: Roboto Mono, Monaco, courier, monospace; + font-size: 0.8rem; + line-height: inherit; + margin: 0 2px; + max-width: inherit; + overflow: inherit; + padding: 2.2em 5px; + white-space: inherit; + } + .markdown-section code:after, + .markdown-section code:before { + letter-spacing: 0.05rem; + } + code .token { + -moz-osx-font-smoothing: initial; + -webkit-font-smoothing: initial; + min-height: 1.5rem; + position: relative; + left: auto; + } + pre:after { + color: #ccc; + content: attr(data-lang); + font-size: 0.6rem; + font-weight: 600; + height: 15px; + line-height: 15px; + padding: 5px 10px 0; + position: absolute; + right: 0; + text-align: right; + top: 0; + } + .markdown-section p.tip { + background-color: #282828; + color: #657b83; + } + input[type='search'] { + background: #4f4f4f; + border-color: #4f4f4f; + color: #c8c8c8; + } } @media (prefers-color-scheme: light or prefers-color-scheme: dark) { -/* @media (screen) { */ -body:not(.ready){overflow:hidden}body:not(.ready) .app-nav,body:not(.ready)>nav,body:not(.ready) [data-cloak]{display:none}div#app{font-size:30px;font-weight:lighter;margin:40vh auto;text-align:center}div#app:empty:before{content:"Loading..."}.emoji{height:1.2rem;vertical-align:middle}.progress{background-color:var(--theme-color,#42b983);height:2px;left:0;position:fixed;right:0;top:0;transition:width .2s,opacity .4s;width:0;z-index:999999}.search .search-keyword,.search a:hover{color:var(--theme-color,#42b983)}.search .search-keyword{font-style:normal;font-weight:700}body,html{height:100%}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:#34495e;font-family:Source Sans Pro,Helvetica Neue,Arial,sans-serif;font-size:15px;letter-spacing:0;margin:0;overflow-x:hidden}img{max-width:100%}a[disabled]{cursor:not-allowed;opacity:.6}kbd{border:1px solid #ccc;border-radius:3px;display:inline-block;font-size:12px!important;line-height:12px;margin-bottom:3px;padding:3px 5px;vertical-align:middle}li input[type=checkbox]{margin:0 .2em .25em 0;vertical-align:middle}.app-nav{margin:25px 60px 0 0;position:absolute;right:0;text-align:right;z-index:10}.app-nav.no-badge{margin-right:25px}.app-nav p{margin:0}.app-nav>a{margin:0 1rem;padding:5px 0}.app-nav li,.app-nav ul{display:inline-block;list-style:none;margin:0}.app-nav a{color:inherit;font-size:16px;text-decoration:none;transition:color .3s}.app-nav a.active,.app-nav a:hover{color:var(--theme-color,#42b983)}.app-nav a.active{border-bottom:2px solid var(--theme-color,#42b983)}.app-nav li{display:inline-block;margin:0 1rem;padding:5px 0;position:relative;cursor:pointer}.app-nav li ul{background-color:#fff;border:1px solid;border-color:#ddd #ddd #ccc;border-radius:4px;box-sizing:border-box;display:none;max-height:calc(100vh - 61px);overflow-y:auto;padding:10px 0;position:absolute;right:-15px;text-align:left;top:100%;white-space:nowrap}.app-nav li ul li{display:block;font-size:14px;line-height:1rem;margin:8px 14px;white-space:nowrap}.app-nav li ul a{display:block;font-size:inherit;margin:0;padding:0}.app-nav li ul a.active{border-bottom:0}.app-nav li:hover ul{display:block}.github-corner{border-bottom:0;position:fixed;right:0;text-decoration:none;top:0;z-index:1}.github-corner:hover .octo-arm{-webkit-animation:octocat-wave .56s ease-in-out;animation:octocat-wave .56s ease-in-out}.github-corner svg{color:#fff;fill:var(--theme-color,#42b983);height:80px;width:80px}main{display:block;position:relative;width:100vw;height:100%;z-index:0}main.hidden{display:none}.anchor{display:inline-block;text-decoration:none;transition:all .3s}.anchor span{color:#34495e}.anchor:hover{text-decoration:underline}.sidebar{border-right:1px solid rgba(0,0,0,.07);overflow-y:auto;padding:40px 0 0;position:absolute;top:0;bottom:0;left:0;transition:transform .25s ease-out;width:300px;z-index:20}.sidebar>h1{margin:0 auto 1rem;font-size:1.5rem;font-weight:300;text-align:center}.sidebar>h1 a{color:inherit;text-decoration:none}.sidebar>h1 .app-nav{display:block;position:static}.sidebar .sidebar-nav{line-height:2em;padding-bottom:40px}.sidebar li.collapse .app-sub-sidebar{display:none}.sidebar ul{margin:0 0 0 15px;padding:0}.sidebar li>p{font-weight:700;margin:0}.sidebar ul,.sidebar ul li{list-style:none}.sidebar ul li a{border-bottom:none;display:block}.sidebar ul li ul{padding-left:20px}.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-thumb{background:transparent;border-radius:4px}.sidebar:hover::-webkit-scrollbar-thumb{background:hsla(0,0%,53.3%,.4)}.sidebar:hover::-webkit-scrollbar-track{background:hsla(0,0%,53.3%,.1)}.sidebar-toggle{background-color:transparent;background-color:hsla(0,0%,100%,.8);border:0;outline:none;padding:10px;position:absolute;bottom:0;left:0;text-align:center;transition:opacity .3s;width:284px;z-index:30;cursor:pointer}.sidebar-toggle:hover .sidebar-toggle-button{opacity:.4}.sidebar-toggle span{background-color:var(--theme-color,#42b983);display:block;margin-bottom:4px;width:16px;height:2px}body.sticky .sidebar,body.sticky .sidebar-toggle{position:fixed}.content{padding-top:60px;position:absolute;top:0;right:0;bottom:0;left:300px;transition:left .25s ease}.markdown-section{margin:0 auto;max-width:80%;padding:30px 15px 40px;position:relative}.markdown-section>*{box-sizing:border-box;font-size:inherit}.markdown-section>:first-child{margin-top:0!important}.markdown-section hr{border:none;border-bottom:1px solid #eee;margin:2em 0}.markdown-section iframe{border:1px solid #eee;width:1px;min-width:100%}.markdown-section table{border-collapse:collapse;border-spacing:0;display:block;margin-bottom:1rem;overflow:auto;width:100%}.markdown-section th{font-weight:700}.markdown-section td,.markdown-section th{border:1px solid #ddd;padding:6px 13px}.markdown-section tr{border-top:1px solid #ccc}.markdown-section p.tip,.markdown-section tr:nth-child(2n){background-color:#f8f8f8}.markdown-section p.tip{border-bottom-right-radius:2px;border-left:4px solid #f66;border-top-right-radius:2px;margin:2em 0;padding:12px 24px 12px 30px;position:relative}.markdown-section p.tip:before{background-color:#f66;border-radius:100%;color:#fff;content:"!";font-family:Dosis,Source Sans Pro,Helvetica Neue,Arial,sans-serif;font-size:14px;font-weight:700;left:-12px;line-height:20px;position:absolute;height:20px;width:20px;text-align:center;top:14px}.markdown-section p.tip code{background-color:#efefef}.markdown-section p.tip em{color:#34495e}.markdown-section p.warn{background:rgba(66,185,131,.1);border-radius:2px;padding:1rem}.markdown-section ul.task-list>li{list-style-type:none}body.close .sidebar{transform:translateX(-300px)}body.close .sidebar-toggle{width:auto}body.close .content{left:0}@media print{.app-nav,.github-corner,.sidebar,.sidebar-toggle{display:none}}@media screen and (max-width:768px){.github-corner,.sidebar,.sidebar-toggle{position:fixed}.app-nav{margin-top:16px}.app-nav li ul{top:30px}main{height:auto;overflow-x:hidden}.sidebar{left:-300px;transition:transform .25s ease-out}.content{left:0;max-width:100vw;position:static;padding-top:20px;transition:transform .25s ease}.app-nav,.github-corner{transition:transform .25s ease-out}.sidebar-toggle{background-color:transparent;width:auto;padding:30px 30px 10px 10px}body.close .sidebar{transform:translateX(300px)}body.close .sidebar-toggle{background-color:hsla(0,0%,100%,.8);transition:background-color 1s;width:284px;padding:10px}body.close .content{transform:translateX(300px)}body.close .app-nav,body.close .github-corner{display:none}.github-corner:hover .octo-arm{-webkit-animation:none;animation:none}.github-corner .octo-arm{-webkit-animation:octocat-wave .56s ease-in-out;animation:octocat-wave .56s ease-in-out}}@-webkit-keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}section.cover{align-items:center;background-position:50%;background-repeat:no-repeat;background-size:cover;height:100vh;width:100vw;display:none}section.cover.show{display:flex}section.cover.has-mask .mask{background-color:#fff;opacity:.8;position:absolute;top:0;height:100%;width:100%}section.cover .cover-main{flex:1;margin:-20px 16px 0;text-align:center}section.cover a{color:inherit}section.cover a,section.cover a:hover{text-decoration:none}section.cover p{line-height:1.5rem;margin:1em 0}section.cover h1{color:inherit;font-size:2.5rem;font-weight:300;margin:.625rem 0 2.5rem;position:relative;text-align:center}section.cover h1 a{display:block}section.cover h1 small{bottom:-.4375rem;font-size:1rem;position:absolute}section.cover blockquote{font-size:1.5rem;text-align:center}section.cover ul{line-height:1.8;list-style-type:none;margin:1em auto;max-width:500px;padding:0}section.cover .cover-main>p:last-child a{border-radius:2rem;border:1px solid var(--theme-color,#42b983);box-sizing:border-box;color:var(--theme-color,#42b983);display:inline-block;font-size:1.05rem;letter-spacing:.1rem;margin:.5rem 1rem;padding:.75em 2rem;text-decoration:none;transition:all .15s ease}section.cover .cover-main>p:last-child a:last-child{background-color:var(--theme-color,#42b983);color:#fff}section.cover .cover-main>p:last-child a:last-child:hover{color:inherit;opacity:.8}section.cover .cover-main>p:last-child a:hover{color:inherit}section.cover blockquote>p>a{border-bottom:2px solid var(--theme-color,#42b983);transition:color .3s}section.cover blockquote>p>a:hover{color:var(--theme-color,#42b983)}.sidebar,body{background-color:#fff}.sidebar{color:#364149}.sidebar li{margin:6px 0}.sidebar ul li a{color:#505d6b;font-size:14px;font-weight:400;overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.sidebar ul li a:hover{text-decoration:underline}.sidebar ul li ul{padding:0}.sidebar ul li.active>a{border-right:2px solid;color:var(--theme-color,#42b983);font-weight:600}.app-sub-sidebar li:before{content:"-";padding-right:4px;float:left}.markdown-section h1,.markdown-section h2,.markdown-section h3,.markdown-section h4,.markdown-section strong{color:#2c3e50;font-weight:600}.markdown-section a{color:var(--theme-color,#42b983);font-weight:600}.markdown-section h1{font-size:2rem;margin:0 0 1rem}.markdown-section h2{font-size:1.75rem;margin:45px 0 .8rem}.markdown-section h3{font-size:1.5rem;margin:40px 0 .6rem}.markdown-section h4{font-size:1.25rem}.markdown-section h5{font-size:1rem}.markdown-section h6{color:#777;font-size:1rem}.markdown-section figure,.markdown-section p{margin:1.2em 0}.markdown-section ol,.markdown-section p,.markdown-section ul{line-height:1.6rem;word-spacing:.05rem}.markdown-section ol,.markdown-section ul{padding-left:1.5rem}.markdown-section blockquote{border-left:4px solid var(--theme-color,#42b983);color:#858585;margin:2em 0;padding-left:20px}.markdown-section blockquote p{font-weight:600;margin-left:0}.markdown-section iframe{margin:1em 0}.markdown-section em{color:#7f8c8d}.markdown-section code{border-radius:2px;color:#e96900;font-size:.8rem;margin:0 2px;padding:3px 5px;white-space:pre-wrap}.markdown-section code,.markdown-section pre{background-color:#f8f8f8;font-family:Roboto Mono,Monaco,courier,monospace}.markdown-section pre{-moz-osx-font-smoothing:initial;-webkit-font-smoothing:initial;line-height:1.5rem;margin:1.2em 0;overflow:auto;padding:0 1.4rem;position:relative;word-wrap:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8e908c}.token.namespace{opacity:.7}.token.boolean,.token.number{color:#c76b29}.token.punctuation{color:#525252}.token.property{color:#c08b30}.token.tag{color:#2973b7}.token.string{color:var(--theme-color,#42b983)}.token.selector{color:#6679cc}.token.attr-name{color:#2973b7}.language-css .token.string,.style .token.string,.token.entity,.token.url{color:#22a2c9}.token.attr-value,.token.control,.token.directive,.token.unit{color:var(--theme-color,#42b983)}.token.function,.token.keyword{color:#e96900}.token.atrule,.token.regex,.token.statement{color:#22a2c9}.token.placeholder,.token.variable{color:#3d8fd1}.token.deleted{text-decoration:line-through}.token.inserted{border-bottom:1px dotted #202746;text-decoration:none}.token.italic{font-style:italic}.token.bold,.token.important{font-weight:700}.token.important{color:#c94922}.token.entity{cursor:help}.markdown-section pre>code{-moz-osx-font-smoothing:initial;-webkit-font-smoothing:initial;background-color:#f8f8f8;border-radius:2px;color:#525252;display:block;font-family:Roboto Mono,Monaco,courier,monospace;font-size:.8rem;line-height:inherit;margin:0 2px;max-width:inherit;overflow:inherit;padding:2.2em 5px;white-space:inherit}.markdown-section code:after,.markdown-section code:before{letter-spacing:.05rem}code .token{-moz-osx-font-smoothing:initial;-webkit-font-smoothing:initial;min-height:1.5rem;position:relative;left:auto}pre:after{color:#ccc;content:attr(data-lang);font-size:.6rem;font-weight:600;height:15px;line-height:15px;padding:5px 10px 0;position:absolute;right:0;text-align:right;top:0} -} \ No newline at end of file + /* @media (screen) { */ + body:not(.ready) { + overflow: hidden; + } + body:not(.ready) .app-nav, + body:not(.ready) > nav, + body:not(.ready) [data-cloak] { + display: none; + } + div#app { + font-size: 30px; + font-weight: lighter; + margin: 40vh auto; + text-align: center; + } + div#app:empty:before { + content: 'Loading...'; + } + .emoji { + height: 1.2rem; + vertical-align: middle; + } + .progress { + background-color: var(--theme-color, #42b983); + height: 2px; + left: 0; + position: fixed; + right: 0; + top: 0; + transition: width 0.2s, opacity 0.4s; + width: 0; + z-index: 999999; + } + .search .search-keyword, + .search a:hover { + color: var(--theme-color, #42b983); + } + .search .search-keyword { + font-style: normal; + font-weight: 700; + } + body, + html { + height: 100%; + } + body { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + color: #34495e; + font-family: Source Sans Pro, Helvetica Neue, Arial, sans-serif; + font-size: 15px; + letter-spacing: 0; + margin: 0; + overflow-x: hidden; + } + img { + max-width: 100%; + } + a[disabled] { + cursor: not-allowed; + opacity: 0.6; + } + kbd { + border: 1px solid #ccc; + border-radius: 3px; + display: inline-block; + font-size: 12px !important; + line-height: 12px; + margin-bottom: 3px; + padding: 3px 5px; + vertical-align: middle; + } + li input[type='checkbox'] { + margin: 0 0.2em 0.25em 0; + vertical-align: middle; + } + .app-nav { + margin: 25px 60px 0 0; + position: absolute; + right: 0; + text-align: right; + z-index: 10; + } + .app-nav.no-badge { + margin-right: 25px; + } + .app-nav p { + margin: 0; + } + .app-nav > a { + margin: 0 1rem; + padding: 5px 0; + } + .app-nav li, + .app-nav ul { + display: inline-block; + list-style: none; + margin: 0; + } + .app-nav a { + color: inherit; + font-size: 16px; + text-decoration: none; + transition: color 0.3s; + } + .app-nav a.active, + .app-nav a:hover { + color: var(--theme-color, #42b983); + } + .app-nav a.active { + border-bottom: 2px solid var(--theme-color, #42b983); + } + .app-nav li { + display: inline-block; + margin: 0 1rem; + padding: 5px 0; + position: relative; + cursor: pointer; + } + .app-nav li ul { + background-color: #fff; + border: 1px solid; + border-color: #ddd #ddd #ccc; + border-radius: 4px; + box-sizing: border-box; + display: none; + max-height: calc(100vh - 61px); + overflow-y: auto; + padding: 10px 0; + position: absolute; + right: -15px; + text-align: left; + top: 100%; + white-space: nowrap; + } + .app-nav li ul li { + display: block; + font-size: 14px; + line-height: 1rem; + margin: 8px 14px; + white-space: nowrap; + } + .app-nav li ul a { + display: block; + font-size: inherit; + margin: 0; + padding: 0; + } + .app-nav li ul a.active { + border-bottom: 0; + } + .app-nav li:hover ul { + display: block; + } + .github-corner { + border-bottom: 0; + position: fixed; + right: 0; + text-decoration: none; + top: 0; + z-index: 1; + } + .github-corner:hover .octo-arm { + -webkit-animation: octocat-wave 0.56s ease-in-out; + animation: octocat-wave 0.56s ease-in-out; + } + .github-corner svg { + color: #fff; + fill: var(--theme-color, #42b983); + height: 80px; + width: 80px; + } + main { + display: block; + position: relative; + width: 100vw; + height: 100%; + z-index: 0; + } + main.hidden { + display: none; + } + .anchor { + display: inline-block; + text-decoration: none; + transition: all 0.3s; + } + .anchor span { + color: #34495e; + } + .anchor:hover { + text-decoration: underline; + } + .sidebar { + border-right: 1px solid rgba(0, 0, 0, 0.07); + overflow-y: auto; + padding: 40px 0 0; + position: absolute; + top: 0; + bottom: 0; + left: 0; + transition: transform 0.25s ease-out; + width: 300px; + z-index: 20; + } + .sidebar > h1 { + margin: 0 auto 1rem; + font-size: 1.5rem; + font-weight: 300; + text-align: center; + } + .sidebar > h1 a { + color: inherit; + text-decoration: none; + } + .sidebar > h1 .app-nav { + display: block; + position: static; + } + .sidebar .sidebar-nav { + line-height: 2em; + padding-bottom: 40px; + } + .sidebar li.collapse .app-sub-sidebar { + display: none; + } + .sidebar ul { + margin: 0 0 0 15px; + padding: 0; + } + .sidebar li > p { + font-weight: 700; + margin: 0; + } + .sidebar ul, + .sidebar ul li { + list-style: none; + } + .sidebar ul li a { + border-bottom: none; + display: block; + } + .sidebar ul li ul { + padding-left: 20px; + } + .sidebar::-webkit-scrollbar { + width: 4px; + } + .sidebar::-webkit-scrollbar-thumb { + background: transparent; + border-radius: 4px; + } + .sidebar:hover::-webkit-scrollbar-thumb { + background: hsla(0, 0%, 53.3%, 0.4); + } + .sidebar:hover::-webkit-scrollbar-track { + background: hsla(0, 0%, 53.3%, 0.1); + } + .sidebar-toggle { + background-color: transparent; + background-color: hsla(0, 0%, 100%, 0.8); + border: 0; + outline: none; + padding: 10px; + position: absolute; + bottom: 0; + left: 0; + text-align: center; + transition: opacity 0.3s; + width: 284px; + z-index: 30; + cursor: pointer; + } + .sidebar-toggle:hover .sidebar-toggle-button { + opacity: 0.4; + } + .sidebar-toggle span { + background-color: var(--theme-color, #42b983); + display: block; + margin-bottom: 4px; + width: 16px; + height: 2px; + } + body.sticky .sidebar, + body.sticky .sidebar-toggle { + position: fixed; + } + .content { + padding-top: 60px; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 300px; + transition: left 0.25s ease; + } + .markdown-section { + margin: 0 auto; + max-width: 80%; + padding: 30px 15px 40px; + position: relative; + } + .markdown-section > * { + box-sizing: border-box; + font-size: inherit; + } + .markdown-section > :first-child { + margin-top: 0 !important; + } + .markdown-section hr { + border: none; + border-bottom: 1px solid #eee; + margin: 2em 0; + } + .markdown-section iframe { + border: 1px solid #eee; + width: 1px; + min-width: 100%; + } + .markdown-section table { + border-collapse: collapse; + border-spacing: 0; + display: block; + margin-bottom: 1rem; + overflow: auto; + width: 100%; + } + .markdown-section th { + font-weight: 700; + } + .markdown-section td, + .markdown-section th { + border: 1px solid #ddd; + padding: 6px 13px; + } + .markdown-section tr { + border-top: 1px solid #ccc; + } + .markdown-section p.tip, + .markdown-section tr:nth-child(2n) { + background-color: #f8f8f8; + } + .markdown-section p.tip { + border-bottom-right-radius: 2px; + border-left: 4px solid #f66; + border-top-right-radius: 2px; + margin: 2em 0; + padding: 12px 24px 12px 30px; + position: relative; + } + .markdown-section p.tip:before { + background-color: #f66; + border-radius: 100%; + color: #fff; + content: '!'; + font-family: Dosis, Source Sans Pro, Helvetica Neue, Arial, sans-serif; + font-size: 14px; + font-weight: 700; + left: -12px; + line-height: 20px; + position: absolute; + height: 20px; + width: 20px; + text-align: center; + top: 14px; + } + .markdown-section p.tip code { + background-color: #efefef; + } + .markdown-section p.tip em { + color: #34495e; + } + .markdown-section p.warn { + background: rgba(66, 185, 131, 0.1); + border-radius: 2px; + padding: 1rem; + } + .markdown-section ul.task-list > li { + list-style-type: none; + } + body.close .sidebar { + transform: translateX(-300px); + } + body.close .sidebar-toggle { + width: auto; + } + body.close .content { + left: 0; + } + @media print { + .app-nav, + .github-corner, + .sidebar, + .sidebar-toggle { + display: none; + } + } + @media screen and (max-width: 768px) { + .github-corner, + .sidebar, + .sidebar-toggle { + position: fixed; + } + .app-nav { + margin-top: 16px; + } + .app-nav li ul { + top: 30px; + } + main { + height: auto; + overflow-x: hidden; + } + .sidebar { + left: -300px; + transition: transform 0.25s ease-out; + } + .content { + left: 0; + max-width: 100vw; + position: static; + padding-top: 20px; + transition: transform 0.25s ease; + } + .app-nav, + .github-corner { + transition: transform 0.25s ease-out; + } + .sidebar-toggle { + background-color: transparent; + width: auto; + padding: 30px 30px 10px 10px; + } + body.close .sidebar { + transform: translateX(300px); + } + body.close .sidebar-toggle { + background-color: hsla(0, 0%, 100%, 0.8); + transition: background-color 1s; + width: 284px; + padding: 10px; + } + body.close .content { + transform: translateX(300px); + } + body.close .app-nav, + body.close .github-corner { + display: none; + } + .github-corner:hover .octo-arm { + -webkit-animation: none; + animation: none; + } + .github-corner .octo-arm { + -webkit-animation: octocat-wave 0.56s ease-in-out; + animation: octocat-wave 0.56s ease-in-out; + } + } + @-webkit-keyframes octocat-wave { + 0%, + to { + transform: rotate(0); + } + 20%, + 60% { + transform: rotate(-25deg); + } + 40%, + 80% { + transform: rotate(10deg); + } + } + @keyframes octocat-wave { + 0%, + to { + transform: rotate(0); + } + 20%, + 60% { + transform: rotate(-25deg); + } + 40%, + 80% { + transform: rotate(10deg); + } + } + section.cover { + align-items: center; + background-position: 50%; + background-repeat: no-repeat; + background-size: cover; + height: 100vh; + width: 100vw; + display: none; + } + section.cover.show { + display: flex; + } + section.cover.has-mask .mask { + background-color: #fff; + opacity: 0.8; + position: absolute; + top: 0; + height: 100%; + width: 100%; + } + section.cover .cover-main { + flex: 1; + margin: -20px 16px 0; + text-align: center; + } + section.cover a { + color: inherit; + } + section.cover a, + section.cover a:hover { + text-decoration: none; + } + section.cover p { + line-height: 1.5rem; + margin: 1em 0; + } + section.cover h1 { + color: inherit; + font-size: 2.5rem; + font-weight: 300; + margin: 0.625rem 0 2.5rem; + position: relative; + text-align: center; + } + section.cover h1 a { + display: block; + } + section.cover h1 small { + bottom: -0.4375rem; + font-size: 1rem; + position: absolute; + } + section.cover blockquote { + font-size: 1.5rem; + text-align: center; + } + section.cover ul { + line-height: 1.8; + list-style-type: none; + margin: 1em auto; + max-width: 500px; + padding: 0; + } + section.cover .cover-main > p:last-child a { + border-radius: 2rem; + border: 1px solid var(--theme-color, #42b983); + box-sizing: border-box; + color: var(--theme-color, #42b983); + display: inline-block; + font-size: 1.05rem; + letter-spacing: 0.1rem; + margin: 0.5rem 1rem; + padding: 0.75em 2rem; + text-decoration: none; + transition: all 0.15s ease; + } + section.cover .cover-main > p:last-child a:last-child { + background-color: var(--theme-color, #42b983); + color: #fff; + } + section.cover .cover-main > p:last-child a:last-child:hover { + color: inherit; + opacity: 0.8; + } + section.cover .cover-main > p:last-child a:hover { + color: inherit; + } + section.cover blockquote > p > a { + border-bottom: 2px solid var(--theme-color, #42b983); + transition: color 0.3s; + } + section.cover blockquote > p > a:hover { + color: var(--theme-color, #42b983); + } + .sidebar, + body { + background-color: #fff; + } + .sidebar { + color: #364149; + } + .sidebar li { + margin: 6px 0; + } + .sidebar ul li a { + color: #505d6b; + font-size: 14px; + font-weight: 400; + overflow: hidden; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + } + .sidebar ul li a:hover { + text-decoration: underline; + } + .sidebar ul li ul { + padding: 0; + } + .sidebar ul li.active > a { + border-right: 2px solid; + color: var(--theme-color, #42b983); + font-weight: 600; + } + .app-sub-sidebar li:before { + content: '-'; + padding-right: 4px; + float: left; + } + .markdown-section h1, + .markdown-section h2, + .markdown-section h3, + .markdown-section h4, + .markdown-section strong { + color: #2c3e50; + font-weight: 600; + } + .markdown-section a { + color: var(--theme-color, #42b983); + font-weight: 600; + } + .markdown-section h1 { + font-size: 2rem; + margin: 0 0 1rem; + } + .markdown-section h2 { + font-size: 1.75rem; + margin: 45px 0 0.8rem; + } + .markdown-section h3 { + font-size: 1.5rem; + margin: 40px 0 0.6rem; + } + .markdown-section h4 { + font-size: 1.25rem; + } + .markdown-section h5 { + font-size: 1rem; + } + .markdown-section h6 { + color: #777; + font-size: 1rem; + } + .markdown-section figure, + .markdown-section p { + margin: 1.2em 0; + } + .markdown-section ol, + .markdown-section p, + .markdown-section ul { + line-height: 1.6rem; + word-spacing: 0.05rem; + } + .markdown-section ol, + .markdown-section ul { + padding-left: 1.5rem; + } + .markdown-section blockquote { + border-left: 4px solid var(--theme-color, #42b983); + color: #858585; + margin: 2em 0; + padding-left: 20px; + } + .markdown-section blockquote p { + font-weight: 600; + margin-left: 0; + } + .markdown-section iframe { + margin: 1em 0; + } + .markdown-section em { + color: #7f8c8d; + } + .markdown-section code { + border-radius: 2px; + color: #e96900; + font-size: 0.8rem; + margin: 0 2px; + padding: 3px 5px; + white-space: pre-wrap; + } + .markdown-section code, + .markdown-section pre { + background-color: #f8f8f8; + font-family: Roboto Mono, Monaco, courier, monospace; + } + .markdown-section pre { + -moz-osx-font-smoothing: initial; + -webkit-font-smoothing: initial; + line-height: 1.5rem; + margin: 1.2em 0; + overflow: auto; + padding: 0 1.4rem; + position: relative; + word-wrap: normal; + } + .token.cdata, + .token.comment, + .token.doctype, + .token.prolog { + color: #8e908c; + } + .token.namespace { + opacity: 0.7; + } + .token.boolean, + .token.number { + color: #c76b29; + } + .token.punctuation { + color: #525252; + } + .token.property { + color: #c08b30; + } + .token.tag { + color: #2973b7; + } + .token.string { + color: var(--theme-color, #42b983); + } + .token.selector { + color: #6679cc; + } + .token.attr-name { + color: #2973b7; + } + .language-css .token.string, + .style .token.string, + .token.entity, + .token.url { + color: #22a2c9; + } + .token.attr-value, + .token.control, + .token.directive, + .token.unit { + color: var(--theme-color, #42b983); + } + .token.function, + .token.keyword { + color: #e96900; + } + .token.atrule, + .token.regex, + .token.statement { + color: #22a2c9; + } + .token.placeholder, + .token.variable { + color: #3d8fd1; + } + .token.deleted { + text-decoration: line-through; + } + .token.inserted { + border-bottom: 1px dotted #202746; + text-decoration: none; + } + .token.italic { + font-style: italic; + } + .token.bold, + .token.important { + font-weight: 700; + } + .token.important { + color: #c94922; + } + .token.entity { + cursor: help; + } + .markdown-section pre > code { + -moz-osx-font-smoothing: initial; + -webkit-font-smoothing: initial; + background-color: #f8f8f8; + border-radius: 2px; + color: #525252; + display: block; + font-family: Roboto Mono, Monaco, courier, monospace; + font-size: 0.8rem; + line-height: inherit; + margin: 0 2px; + max-width: inherit; + overflow: inherit; + padding: 2.2em 5px; + white-space: inherit; + } + .markdown-section code:after, + .markdown-section code:before { + letter-spacing: 0.05rem; + } + code .token { + -moz-osx-font-smoothing: initial; + -webkit-font-smoothing: initial; + min-height: 1.5rem; + position: relative; + left: auto; + } + pre:after { + color: #ccc; + content: attr(data-lang); + font-size: 0.6rem; + font-weight: 600; + height: 15px; + line-height: 15px; + padding: 5px 10px 0; + position: absolute; + right: 0; + text-align: right; + top: 0; + } +} diff --git a/src/docs/theming.md b/src/docs/theming.md index 351237045..68855159d 100644 --- a/src/docs/theming.md +++ b/src/docs/theming.md @@ -28,8 +28,8 @@ Example of `Initialize` call setting `theme` to `base`: ```javascript mermaidAPI.initialize({ - securityLevel: 'loose', - theme: 'base', + securityLevel: 'loose', + theme: 'base', }); ``` @@ -220,9 +220,9 @@ Variables that are unique to some diagrams can be affected by changes in Theme V \*\*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 -- set the tertiary color to a reddish shade as well -- make the edge label background differ from the subgraph by setting the edgeLabelBackground +- Make the primary color a little lighter +- set the tertiary color to a reddish shade as well +- make the edge label background differ from the subgraph by setting the edgeLabelBackground ```mermaid-example %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ffcccc', 'edgeLabelBackground':'#ffffee', 'tertiaryColor': '#fff0f0'}}}%% diff --git a/src/docs/upgrading.md b/src/docs/upgrading.md index 9f318b3c7..16dea1cba 100644 --- a/src/docs/upgrading.md +++ b/src/docs/upgrading.md @@ -2,27 +2,24 @@ Some of the interfaces has been upgraded. - ## From version 0.4.0 to 0.5.0 - ### Initialization `mermaid_config` is no longer used. Instead a call to mermaid initialize is done as in the example below: - #### version 0.4.0 ```javascript mermaid_config = { - startOnLoad: true -} + startOnLoad: true, +}; ``` #### version 0.5.0 ```javascript mermaid.initialize({ - startOnLoad: true -}) + startOnLoad: true, +}); ``` diff --git a/src/docs/usage.md b/src/docs/usage.md index e036217fe..325709e10 100644 --- a/src/docs/usage.md +++ b/src/docs/usage.md @@ -43,22 +43,22 @@ The easiest way to integrate mermaid on a web page requires three elements: 1. Inclusion of the mermaid address in the html page using a `script` tag, in the `src` section.Example: - ```html - <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> - ``` + ```html + <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> + ``` 2. The `mermaidAPI` call, in a separate `script` tag. Example: - ```html - <script> - mermaid.initialize({ startOnLoad: true }); - </script> - ``` + ```html + <script> + mermaid.initialize({ startOnLoad: true }); + </script> + ``` 3. A graph definition, inside `<div>` tags labeled `class=mermaid`. Example: - ```html - <div class="mermaid">graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);</div> - ``` + ```html + <div class="mermaid">graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);</div> + ``` **Following these directions, mermaid starts at page load and (when the page has loaded) it will locate the graph definitions inside the `div` tags with `class="mermaid"` and return diagrams in SVG form, following given definitions.** @@ -68,16 +68,16 @@ locate the graph definitions inside the `div` tags with `class="mermaid"` and re ```html <!DOCTYPE html> <html lang="en"> - <head> - <meta charset="utf-8" /> - </head> - <body> - <div class="mermaid">graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);</div> - <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> - <script> - mermaid.initialize({ startOnLoad: true }); - </script> - </body> + <head> + <meta charset="utf-8" /> + </head> + <body> + <div class="mermaid">graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);</div> + <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> + <script> + mermaid.initialize({ startOnLoad: true }); + </script> + </body> </html> ``` @@ -103,10 +103,10 @@ A `securityLevel` configuration has to first be cleared, `securityLevel` sets th Values: -- **strict**: (**default**) tags in text are encoded, click functionality is disabled -- **loose**: tags in text are allowed, click functionality is enabled -- **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled -- **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This prevent any JavaScript running in the context. This may hinder interactive functionality of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc. +- **strict**: (**default**) tags in text are encoded, click functionality is disabled +- **loose**: tags in text are allowed, click functionality is enabled +- **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled +- **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This prevent any JavaScript running in the context. This may hinder interactive functionality of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc. ```note This changes the default behaviour of mermaid so that after upgrade to 8.2, unless the `securityLevel` is not changed, tags in flowcharts are encoded as tags and clicking is disabled. @@ -119,7 +119,7 @@ This changes the default behaviour of mermaid so that after upgrade to 8.2, unle ```javascript mermaidAPI.initialize({ - securityLevel: 'loose', + securityLevel: 'loose', }); ``` @@ -130,7 +130,7 @@ whole page to load (dom + assets, particularly the fonts file). ```javascript $(document).load(function () { - mermaid.initialize(); + mermaid.initialize(); }); ``` @@ -138,7 +138,7 @@ or ```javascript $(document).ready(function () { - mermaid.initialize(); + mermaid.initialize(); }); ``` @@ -148,7 +148,7 @@ If your page has other fonts in its body those might be used instead of the merm ```css div.mermaid { - font-family: 'trebuchet ms', verdana, arial; + font-family: 'trebuchet ms', verdana, arial; } ``` @@ -158,11 +158,11 @@ By default, `mermaid.init` will be called when the document is ready, finding al `class="mermaid"`. If you are adding content after mermaid is loaded, or otherwise need finer-grained control of this behavior, you can call `init` yourself with: -- a configuration object -- some nodes, as - - a node - - an array-like of nodes - - or W3C selector that will find your nodes +- a configuration object +- some nodes, as + - a node + - an array-like of nodes + - or W3C selector that will find your nodes Example: @@ -196,16 +196,16 @@ The example below show an outline of how this could be used. The example just lo <script src="mermaid.js"></script> <script> - mermaid.mermaidAPI.initialize({ startOnLoad: false }); - $(function () { - // Example of using the API var - element = document.querySelector('#graphDiv'); - var insertSvg = function (svgCode, bindFunctions) { - element.innerHTML = svgCode; - }; - var graphDefinition = 'graph TB\na-->b'; - var graph = mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg); - }); + mermaid.mermaidAPI.initialize({ startOnLoad: false }); + $(function () { + // Example of using the API var + element = document.querySelector('#graphDiv'); + var insertSvg = function (svgCode, bindFunctions) { + element.innerHTML = svgCode; + }; + var graphDefinition = 'graph TB\na-->b'; + var graph = mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg); + }); </script> ``` @@ -219,11 +219,11 @@ bind events to an SVG when using the API for rendering. ```javascript var insertSvg = function (svgCode, bindFunctions) { - element.innerHTML = svgCode; - if (typeof callback !== 'undefined') { - callback(id); - } - bindFunctions(element); + element.innerHTML = svgCode; + if (typeof callback !== 'undefined') { + callback(id); + } + bindFunctions(element); }; var id = 'theGraph'; @@ -244,11 +244,11 @@ This is the renderer used for transforming the documentation from Markdown to ht ```javascript var renderer = new marked.Renderer(); renderer.code = function (code, language) { - if (code.match(/^sequenceDiagram/) || code.match(/^graph/)) { - return '<div class="mermaid">' + code + '</div>'; - } else { - return '<pre><code>' + code + '</code></pre>'; - } + if (code.match(/^sequenceDiagram/) || code.match(/^graph/)) { + return '<div class="mermaid">' + code + '</div>'; + } else { + return '<pre><code>' + code + '</code></pre>'; + } }; ``` @@ -290,15 +290,15 @@ The code-example below in meta code illustrates how this could work: ```javascript mermaid.parseError = function (err, hash) { - displayErrorInGui(err); + displayErrorInGui(err); }; var textFieldUpdated = function () { - var textStr = getTextFromFormField('code'); + var textStr = getTextFromFormField('code'); - if (mermaid.parse(textStr)) { - reRender(textStr); - } + if (mermaid.parse(textStr)) { + reRender(textStr); + } }; bindEventHandler('change', 'code', textFieldUpdated); @@ -328,8 +328,8 @@ on what kind of integration you use. ```html <script src="../dist/mermaid.js"></script> <script> - var config = { startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true } }; - mermaid.initialize(config); + var config = { startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true } }; + mermaid.initialize(config); </script> ``` @@ -344,8 +344,8 @@ This is the preferred way of configuring mermaid. Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this approach are: -- mermaid.startOnLoad -- mermaid.htmlLabels +- mermaid.startOnLoad +- mermaid.htmlLabels ```javascript mermaid.startOnLoad = true; @@ -360,8 +360,8 @@ This way of setting the configuration is deprecated. Instead the preferred way i It is possible to set some configuration via the mermaid object. The two parameters that are supported using this approach are: -- mermaid_config.startOnLoad -- mermaid_config.htmlLabels +- mermaid_config.startOnLoad +- mermaid_config.htmlLabels ```javascript mermaid_config.startOnLoad = true; @@ -375,8 +375,8 @@ This way of setting the configuration is deprecated. Instead the preferred way i To set some configuration via the mermaid object. The two parameters that are supported using this approach are: -- mermaid_config.startOnLoad -- mermaid_config.htmlLabels +- mermaid_config.startOnLoad +- mermaid_config.htmlLabels ```javascript mermaid_config.startOnLoad = true; diff --git a/test.js b/test.js index 824cfec88..fa728c6ed 100644 --- a/test.js +++ b/test.js @@ -1,3 +1,6 @@ +/** + * + */ function apa() { // comment's const a = 1;