diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index eaa5382acd..75b4418bd2 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -17,7 +17,7 @@ +``` + +**Example definition** + +```mermaid-example +block-beta + A-->B[AAABBB] + B-->D + class A cssClass +``` + +### Default class + +If a class is named default it will be assigned to all classes without specific class definitions. + +``` + classDef default fill:#f9f,stroke:#333,stroke-width:4px; +``` + +## Basic support for fontawesome + +It is possible to add icons from fontawesome. + +The icons are accessed via the syntax fa:#icon class name#. + +```mermaid-example +flowchart TD + B["fab:fa-twitter for peace"] + B-->C[fa:fa-ban forbidden] + B-->D(fa:fa-spinner) + B-->E(A fa:fa-camera-retro perhaps?) +``` + +Mermaid is compatible with Font Awesome up to verion 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free). + +## 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. + +- 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. + +```mermaid-example +block-beta + A[Hard edge] -->|Link text| B(Round edge) + B --> C{Decision} + C -->|One| D[Result one] + C -->|Two| E[Result two] +``` + +## Configuration + +### Renderer + +The layout of the diagram is done with the renderer. The default renderer is dagre. + +Starting with Mermaid version 9.4, you can use an alternate renderer named elk. The elk renderer is better for larger and/or more complex diagrams. + +The _elk_ renderer is an experimenal feature. +You can change the renderer to elk by adding this directive: + +``` +%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%% +``` + +```note +Note that the site needs to use mermaid version 9.4+ for this to work and have this featured enabled in the lazy-loading configuration. +``` + +### Width + +It is possible to adjust the width of the rendered flowchart. + +This is done by defining **mermaid.flowchartConfig** or by the CLI to use a JSON file with the configuration. How to use the CLI is described in the mermaidCLI page. +mermaid.flowchartConfig can be set to a JSON string with config parameters or the corresponding object. + +```javascript +mermaid.flowchartConfig = { + width: 100% +} +```