diff --git a/docs/integrations.md~HEAD b/docs/integrations.md~HEAD
deleted file mode 100644
index 9d7c71b87..000000000
--- a/docs/integrations.md~HEAD
+++ /dev/null
@@ -1,169 +0,0 @@
-# Integrations
-
-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
-
-- [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) (**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**)
-- [GitHub](https://github.com)
- - [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
- - [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
-- [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)
-- [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)
-
-## CRM/ERP/Similar
-
- - [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)
-
-## CMS
-
-- [VuePress](https://vuepress.vuejs.org/)
- - [Plugin for Mermaid.js](https://github.com/eFrane/vuepress-plugin-mermaidjs)
- - [vuepress-plugin-mermaidjs-cli](https://github.com/gwleclerc/vuepress-plugin-mermaidjs-cli)
-- [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)
-
-## 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)
-
-## 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://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://s3.amazonaws.com/extend.brackets/alanhohn.mermaid-preview/alanhohn.mermaid-preview-1.0.2.zip)
-- [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)
-- [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)
-
-## Browser Extensions
-
-| Name | Chrome Web Store | Firefox Add-ons | Opera | Edge | Source/Repository |
-| -- | -- | -- | -- | -- | -- |
-| GitHub + Mermaid | [🎡🔗](https://chrome.google.com/webstore/detail/github-%20-mermaid/goiiopgdnkogdbjmncgedmgpoajilohe) | [🦊🔗](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)
-- [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)
diff --git a/docs/sequenceDiagram.md~HEAD b/docs/sequenceDiagram.md~HEAD
deleted file mode 100644
index c5627d8c7..000000000
--- a/docs/sequenceDiagram.md~HEAD
+++ /dev/null
@@ -1,504 +0,0 @@
-# Sequence diagrams
-
-**Edit this Page** [](https://github.com/mermaid-js/mermaid/blob/develop/docs/sequenceDiagram.md)
-> A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.
-
-Mermaid can render sequence diagrams.
-
-```mermaid-example
-sequenceDiagram
- Alice->>John: Hello John, how are you?
- John-->>Alice: Great!
- Alice-)John: See you later!
-```
-
-```note
-A note on nodes, the word "end" could potentially break the diagram, due to the way that the mermaid language is scripted.
-
-If unavoidable, one must use parentheses(), quotation marks "", or brackets {},[], to enclose the word "end". i.e : (end), [end], {end}.
-```
-
-## Syntax
-
-### Participants
-
-The participants can be defined implicitly as in the first example on this page. The participants or actors are
-rendered in order of appearance in the diagram source text. Sometimes you might want to show the participants in a
-different order than how they appear in the first message. It is possible to specify the actor's order of
-appearance by doing the following:
-
-```mermaid-example
-sequenceDiagram
- participant Alice
- participant Bob
- Alice->>Bob: Hi Bob
- Bob->>Alice: Hi Alice
-```
-
-### Actors
-
-If you specifically want to use the actor symbol instead of a rectangle with text you can do so by using actor statements as per below.
-```mermaid-example
-sequenceDiagram
- actor Alice
- actor Bob
- Alice->>Bob: Hi Bob
- Bob->>Alice: Hi Alice
-```
-
-### Aliases
-
-The actor can have a convenient identifier and a descriptive label.
-
-```mermaid-example
-sequenceDiagram
- participant A as Alice
- participant J as John
- A->>J: Hello John, how are you?
- J->>A: Great!
-```
-
-## Messages
-
-Messages can be of two displayed either solid or with a dotted line.
-
-```
-[Actor][Arrow][Actor]:Message text
-```
-
-There are six types of arrows currently supported:
-
-| Type | Description |
-| ---- | ------------------------------------------- |
-| -> | Solid line without arrow |
-| --> | Dotted line without arrow |
-| ->> | Solid line with arrowhead |
-| -->> | Dotted line with arrowhead |
-| -x | Solid line with a cross at the end |
-| --x | Dotted line with a cross at the end. |
-| -) | Solid line with an open arrow at the end (async) |
-| --) | Dotted line with a open arrow at the end (async) |
-
-## Activations
-
-It is possible to activate and deactivate an actor. (de)activation can be dedicated declarations:
-
-```mermaid-example
-sequenceDiagram
- Alice->>John: Hello John, how are you?
- activate John
- John-->>Alice: Great!
- deactivate John
-```
-
-There is also a shortcut notation by appending `+`/`-` suffix to the message arrow:
-
-```mermaid-example
-sequenceDiagram
- Alice->>+John: Hello John, how are you?
- John-->>-Alice: Great!
-```
-
-Activations can be stacked for same actor:
-
-```mermaid-example
-sequenceDiagram
- Alice->>+John: Hello John, how are you?
- Alice->>+John: John, can you hear me?
- John-->>-Alice: Hi Alice, I can hear you!
- John-->>-Alice: I feel great!
-```
-
-## Notes
-
-It is possible to add notes to a sequence diagram. This is done by the notation
-Note [ right of | left of | over ] [Actor]: Text in note content
-
-See the example below:
-
-```mermaid-example
-sequenceDiagram
- participant John
- Note right of John: Text in note
-```
-
-It is also possible to create notes spanning two participants:
-
-```mermaid-example
-sequenceDiagram
- Alice->John: Hello John, how are you?
- Note over Alice,John: A typical interaction
-```
-
-## Loops
-
-It is possible to express loops in a sequence diagram. This is done by the notation
-
-```
-loop Loop text
-... statements ...
-end
-```
-
-See the example below:
-
-```mermaid-example
-sequenceDiagram
- Alice->John: Hello John, how are you?
- loop Every minute
- John-->Alice: Great!
- end
-```
-
-## Alt
-
-It is possible to express alternative paths in a sequence diagram. This is done by the notation
-
-```
-alt Describing text
-... statements ...
-else
-... statements ...
-end
-```
-
-or if there is sequence that is optional (if without else).
-
-```
-opt Describing text
-... statements ...
-end
-```
-
-See the example below:
-
-```mermaid-example
-sequenceDiagram
- Alice->>Bob: Hello Bob, how are you?
- alt is sick
- Bob->>Alice: Not so good :(
- else is well
- Bob->>Alice: Feeling fresh like a daisy
- end
- opt Extra response
- Bob->>Alice: Thanks for asking
- end
-```
-
-## Parallel
-
-It is possible to show actions that are happening in parallel.
-
-This is done by the notation
-
-```
-par [Action 1]
-... statements ...
-and [Action 2]
-... statements ...
-and [Action N]
-... statements ...
-end
-```
-
-See the example below:
-
-```mermaid-example
-sequenceDiagram
- par Alice to Bob
- Alice->>Bob: Hello guys!
- and Alice to John
- Alice->>John: Hello guys!
- end
- Bob-->>Alice: Hi Alice!
- John-->>Alice: Hi Alice!
-```
-
-It is also possible to nest parallel blocks.
-
-```mermaid-example
-sequenceDiagram
- par Alice to Bob
- Alice->>Bob: Go help John
- and Alice to John
- Alice->>John: I want this done today
- par John to Charlie
- John->>Charlie: Can we do this today?
- and John to Diana
- John->>Diana: Can you help us today?
- end
- end
-```
-
-## Background Highlighting
-
-It is possible to highlight flows by providing colored background rects. This is done by the notation
-
-The colors are defined using rgb and rgba syntax.
-
-```
-rect rgb(0, 255, 0)
-... content ...
-end
-```
-
-```
-rect rgba(0, 0, 255, .1)
-... content ...
-end
-```
-
-See the examples below:
-
-```mermaid-example
-sequenceDiagram
- participant Alice
- participant John
-
- rect rgb(191, 223, 255)
- note right of Alice: Alice calls John.
- Alice->>+John: Hello John, how are you?
- rect rgb(200, 150, 255)
- Alice->>+John: John, can you hear me?
- John-->>-Alice: Hi Alice, I can hear you!
- end
- John-->>-Alice: I feel great!
- end
- Alice ->>+ John: Did you want to go to the game tonight?
- John -->>- Alice: Yeah! See you there.
-
-```
-
-## Comments
-
-Comments can be entered within a sequence 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 after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
-
-```mmd
-sequenceDiagram
- Alice->>John: Hello John, how are you?
- %% this is a comment
- John-->>Alice: Great!
-```
-
-## Entity codes to escape characters
-
-It is possible to escape characters using the syntax exemplified here.
-
-```mermaid-example
-sequenceDiagram
- A->>B: I #9829; you!
- B->>A: I #9829; you #infin; times more!
-```
-
-Numbers given are base 10, so `#` can be encoded as `#35;`. It is also supported to use HTML character names.
-
-Because semicolons can be used instead of line breaks to define the markup, you need to use `#59;` to include a semicolon in message text.
-
-## sequenceNumbers
-
-It is possible to get a sequence number attached to each arrow in a sequence diagram. This can be configured when adding mermaid to the website as shown below:
-
-```html
-
-```
-
-It can also be be turned on via the diagram code as in the diagram:
-
-```mermaid-example
-sequenceDiagram
- autonumber
- Alice->>John: Hello John, how are you?
- loop Healthcheck
- John->>John: Fight against hypochondria
- end
- Note right of John: Rational thoughts!
- John-->>Alice: Great!
- John->>Bob: How about you?
- Bob-->>John: Jolly good!
-```
-
-## Actor Menus
-
-Actors can have popup-menus containing individualized links to external pages. For example, if an actor represented a web service, useful links might include a link to the service health dashboard, repo containing the code for the service, or a wiki page describing the service.
-
-This can be configured by adding one or more link lines with the format:
-```
-link : @
-```
-```mmd
-sequenceDiagram
- participant Alice
- participant John
- link Alice: Dashboard @ https://dashboard.contoso.com/alice
- link Alice: Wiki @ https://wiki.contoso.com/alice
- link John: Dashboard @ https://dashboard.contoso.com/john
- link John: Wiki @ https://wiki.contoso.com/john
- Alice->>John: Hello John, how are you?
- John-->>Alice: Great!
- Alice-)John: See you later!
-```
-
-#### Advanced Menu Syntax
-There is an advanced syntax that relies on JSON formatting. If you are comfortable with JSON format, then this exists as well.
-
-This can be configured by adding the links lines with the format:
-
-```
-links :
-```
-
-An example is below:
-
-```mmd
-sequenceDiagram
- participant Alice
- participant John
- links Alice: {"Dashboard": "https://dashboard.contoso.com/alice", "Wiki": "https://wiki.contoso.com/alice"}
- links John: {"Dashboard": "https://dashboard.contoso.com/john", "Wiki": "https://wiki.contoso.com/john"}
- Alice->>John: Hello John, how are you?
- John-->>Alice: Great!
- Alice-)John: See you later!
-```
-
-## Styling
-
-Styling of a sequence diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/sequence.scss
-
-### Classes used
-
-| Class | Description |
-| ------------ | ----------------------------------------------------------- |
-| actor | Style for the actor box at the top of the diagram. |
-| text.actor | Styles for text in the actor box at the top of the diagram. |
-| actor-line | The vertical line for an actor. |
-| messageLine0 | Styles for the solid message line. |
-| messageLine1 | Styles for the dotted message line. |
-| messageText | Defines styles for the text on the message arrows. |
-| labelBox | Defines styles label to left in a loop. |
-| labelText | Styles for the text in label for loops. |
-| loopText | Styles for the text in the loop box. |
-| loopLine | Defines styles for the lines in the loop box. |
-| note | Styles for the note box. |
-| noteText | Styles for the text on in the note boxes. |
-
-### Sample stylesheet
-
-```css
-body {
- background: white;
-}
-
-.actor {
- stroke: #ccccff;
- fill: #ececff;
-}
-text.actor {
- fill: black;
- stroke: none;
- font-family: Helvetica;
-}
-
-.actor-line {
- stroke: grey;
-}
-
-.messageLine0 {
- 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;
-}
-
-#arrowhead {
- fill: black;
-}
-
-.messageText {
- fill: black;
- stroke: none;
- font-family: 'trebuchet ms', verdana, arial;
- font-size: 14px;
-}
-
-.labelBox {
- stroke: #ccccff;
- fill: #ececff;
-}
-
-.labelText {
- fill: black;
- stroke: none;
- font-family: 'trebuchet ms', verdana, arial;
-}
-
-.loopText {
- fill: black;
- stroke: none;
- font-family: 'trebuchet ms', verdana, arial;
-}
-
-.loopLine {
- stroke-width: 2;
- stroke-dasharray: '2 2';
- marker-end: 'url(#arrowhead)';
- stroke: #ccccff;
-}
-
-.note {
- stroke: #decc93;
- fill: #fff5ad;
-}
-
-.noteText {
- fill: black;
- stroke: none;
- font-family: 'trebuchet ms', verdana, arial;
- font-size: 14px;
-}
-```
-
-## Configuration
-
-Is it possible to adjust the margins for rendering the sequence diagram.
-
-This is done by defining `mermaid.sequenceConfig` or by the CLI to use a json file with the configuration.
-How to use the CLI is described in the [mermaidCLI](mermaidCLI) page.
-`mermaid.sequenceConfig` can be set to a JSON string with config parameters or the corresponding object.
-
-```javascript
-mermaid.sequenceConfig = {
- diagramMarginX: 50,
- diagramMarginY: 10,
- boxTextMargin: 5,
- noteMargin: 10,
- messageMargin: 35,
- mirrorActors: true
-};
-```
-
-### Possible configuration parameters:
-
-| Parameter | Description | Default value |
-| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------ |
-| mirrorActors | 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 |
-| actorFontSize | Sets the font size for the actor's description | 14 |
-| actorFontFamily | Sets the font family for the actor's description | "Open-Sans", "sans-serif" |
-| actorFontWeight | Sets the font weight for the actor's description | "Open-Sans", "sans-serif" |
-| noteFontSize | Sets the font size for actor-attached notes | 14 |
-| noteFontFamily | Sets the font family for actor-attached notes | "trebuchet ms", verdana, arial |
-| noteFontWeight | Sets the font weight for actor-attached notes | "trebuchet ms", verdana, arial |
-| noteAlign | Sets the text alignment for text in actor-attached notes | center |
-| messageFontSize | Sets the font size for actor<->actor messages | 16 |
-| messageFontFamily | Sets the font family for actor<->actor messages | "trebuchet ms", verdana, arial |
-| messageFontWeight | Sets the font weight for actor<->actor messages | "trebuchet ms", verdana, arial |