diff --git a/docs/8.6.0_docs.md b/docs/8.6.0_docs.md index d5820cb34..8c05c6062 100644 --- a/docs/8.6.0_docs.md +++ b/docs/8.6.0_docs.md @@ -73,7 +73,7 @@ When deployed within code, init is called before the graph/diagram description. ``` **for example**: -``` +```mermaid-code %%{init: {"theme": "default", "logLevel": 1 }}%% graph LR a-->b diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 89115a27d..4caa8da8c 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -39,7 +39,7 @@ It is also possible to override site-wide theme settings locally, for a specific **Following is an example:** -``` +```mermaid-code %%{init: {'theme':'base'}}%% graph TD a --> b @@ -56,7 +56,7 @@ The easiest way to make a custom theme is to start with the base theme, and just Here is an example of overriding `primaryColor` and giving everything a different look, using `%%init%%`. -``` +```mermaid-code %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%% graph TD A[Christmas] -->|Get money| B(Go shopping) diff --git a/docs/README.md b/docs/README.md index 543c24ea0..bf503f39e 100644 --- a/docs/README.md +++ b/docs/README.md @@ -48,7 +48,7 @@ For a more detailed introduction to Mermaid and some of it's basic uses, refer t ### [Flowchart](./flowchart.md?id=flowcharts-basic-syntax) -``` +```mermaid-code graph TD; A-->B; A-->C; @@ -60,7 +60,7 @@ graph TD; ### [Sequence diagram](./sequenceDiagram.md) -``` +```mermaid-code sequenceDiagram participant Alice participant Bob @@ -78,7 +78,7 @@ sequenceDiagram ### [Gantt diagram](./gantt.md) -``` +```mermaid-code gantt dateFormat YYYY-MM-DD title Adding GANTT diagram to mermaid @@ -95,7 +95,7 @@ Future task2 : des4, after des3, 5d ### [Class diagram](./classDiagram.md) -``` +```mermaid-code classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 @@ -116,7 +116,7 @@ Class08 <--> C2: Cool label ### Git graph - :exclamation: experimental -``` +```mermaid-code gitGraph: options { @@ -139,7 +139,7 @@ merge newbranch ### [Entity Relationship Diagram - :exclamation: experimental](./entityRelationshipDiagram.md) -``` +```mermaid-code erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains @@ -151,7 +151,7 @@ erDiagram ### [User Journey Diagram](./user-journey.md) -```markdown +```mermaid-code journey title My working day section Go to work @@ -229,19 +229,19 @@ Don't hesitate to contact me if you want to get involved! ### Setup -``` +```sh yarn install ``` ### Build -``` +```sh yarn build:watch ``` ### Lint -``` +```sh yarn lint ``` @@ -250,7 +250,7 @@ We recommend you to install [editor plugins](https://eslint.org/docs/user-guide/ ### Test -``` +```sh yarn test ``` Manual test in browser: open `dist/index.html` @@ -261,7 +261,7 @@ For those who have the permission to do so: Update version number in `package.json`. -``` +```sh npm publish ``` diff --git a/docs/classDiagram.md b/docs/classDiagram.md index f55982506..9263ba72a 100644 --- a/docs/classDiagram.md +++ b/docs/classDiagram.md @@ -7,7 +7,7 @@ The class diagram is the main building block of object-oriented modeling. It is Mermaid can render class diagrams. -``` +```mermaid-code classDiagram Animal <|-- Duck Animal <|-- Fish @@ -68,7 +68,7 @@ A single instance of a class in the diagram contains three compartments: - 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-code classDiagram class BankAccount BankAccount : +String owner @@ -94,7 +94,7 @@ There are two ways to define a class: - Explicitly defining a class using keyword **class** like `class Animal`. This defines the Animal class - Define two classes via a **relationship** between them `Vehicle <|-- Car`. This defines two classes Vehicle and Car along with their relationship. -``` +```mermaid-code classDiagram class Animal Vehicle <|-- Car @@ -118,7 +118,7 @@ There are two ways to define the members of a class, and regardless of whichever - Associate a member of a class using **:** (colon) followed by member name, useful to define one member at a time. For example: -``` +```mermaid-code class BankAccount BankAccount : +String owner BankAccount : +BigDecimal balance @@ -137,7 +137,7 @@ There are two ways to define the members of a class, and regardless of whichever - Associate members of a class using **{}** brackets, where members are grouped within curly brackets. Suitable for defining multiple members at once. For example: -``` +```mermaid-code class BankAccount{ +String owner +BigDecimal balance @@ -161,7 +161,7 @@ class BankAccount{ Optionally you can end the method/function definition with the data type that will be returned (note: there must be a space between the final `)` of the method definition and return type example: -``` +```mermaid-code class BankAccount{ +String owner +BigDecimal balance @@ -186,7 +186,7 @@ Members can be defined using generic types, such as `List`, for fields, par This can be done as part of either class definition method: -``` +```mermaid-code classDiagram class Square~Shape~{ int id @@ -240,7 +240,7 @@ To specify the visibility of a class member (i.e. any attribute or method), thes A relationship is a general term covering the specific types of logical connections found on class and object diagrams. -``` +```mermaid-code [classA][Arrow][ClassB] ``` @@ -257,7 +257,7 @@ There are different types of relations defined for classes under UML which are c | ..\|> | Realization | | .. | Link (Dashed) | -``` +```mermaid-code classDiagram classA <|-- classB classC *-- classD @@ -285,7 +285,7 @@ classO .. classP We can use the labels to describe nature of relation between two classes. Also, arrowheads can be used in opposite directions as well : -``` +```mermaid-code classDiagram classA --|> classB : Inheritance classC --* classD : Composition @@ -318,7 +318,7 @@ It is possible to add a label text to a relation: [classA][Arrow][ClassB]:LabelText ``` -``` +```mermaid-code classDiagram classA <|-- classB : implements classC *-- classD : composition @@ -336,7 +336,7 @@ classE o-- classF : association Relations can go in multiple ways: -``` +```mermaid-code classDiagram Animal <|--|> Zebra ``` @@ -388,7 +388,7 @@ Cardinality can be easily defined by placing cardinality text within quotes `"` [classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText ``` -``` +```mermaid-code classDiagram Customer "1" --> "*" Ticket Student "1" --> "1..*" Course @@ -415,7 +415,7 @@ Annotations are defined within the opening `<<` and closing `>>`. There are two - In a **_separate line_** after a class is defined. For example: -``` +```mermaid-code classDiagram class Shape <> Shape @@ -431,7 +431,7 @@ Shape : draw() - In a **_nested structure_** along with class definition. For example: -``` +```mermaid-code classDiagram class Shape{ <> @@ -470,7 +470,7 @@ class Color{ Comments can be entered within a class 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 class diagram syntax -``` +```mermaid-code classDiagram %% This whole line is a comment classDiagram class Shape <> class Shape{ @@ -485,7 +485,7 @@ class Shape{ With class diagrams you can use the direction statement to set the direction which the diagram will render like in this example. -``` +```mermaid-code classDiagram direction RL class Student { @@ -542,7 +542,7 @@ click className href "url" "tooltip" _URL Link:_ -``` +```mermaid-code classDiagram class Shape link Shape "http://www.github.com" "This is a tooltip for a link" @@ -552,7 +552,7 @@ click Shape2 href "http://www.github.com" "This is a tooltip for a link" _Callback:_ -``` +```mermaid-code classDiagram class Shape callback Shape "callbackFunction" "This is a tooltip for a callback" @@ -584,7 +584,7 @@ classDiagram Beginners tip, a full example using interactive links in an html context: -``` +```html
classDiagram @@ -658,14 +658,14 @@ It is also possible to attach a class to a list of nodes in one statement: A shorter form of adding a class is to attach the classname to the node using the `:::` operator as per below: -``` +```mermaid-code classDiagram class Animal:::cssClass ``` Or: -``` +```mermaid-code classDiagram class Animal:::cssClass { -int sizeInFeet diff --git a/docs/diagrams-and-syntax-and-examples/flowchart.md b/docs/diagrams-and-syntax-and-examples/flowchart.md index 8be4ec89c..0dcb9f5ae 100644 --- a/docs/diagrams-and-syntax-and-examples/flowchart.md +++ b/docs/diagrams-and-syntax-and-examples/flowchart.md @@ -11,7 +11,7 @@ This statement declares the direction of the Flowchart. This declares the graph is oriented from top to bottom (`TD` or `TB`). -``` +```mermaid-code graph TD Start --> Stop ``` @@ -22,7 +22,7 @@ graph TD This declares the graph is oriented from left to right (`LR`). -``` +```mermaid-code graph LR Start --> Stop ``` @@ -55,7 +55,7 @@ Apart from the graph type, the syntax is the same. This is currently experimenta ### A node (default) -``` +```mermaid-code graph LR id ``` @@ -73,7 +73,7 @@ It is also possible to set text in the box that differs from the id. If this is found for the node that will be used. Also if you define edges for the node later on, you can omit text definitions. The one previously defined will be used when rendering the box. -``` +```mermaid-code graph LR id1[This is the text in the box] ``` @@ -86,7 +86,7 @@ graph LR ### A node with round edges -``` +```mermaid-code graph LR id1(This is the text in the box) ``` @@ -97,7 +97,7 @@ graph LR ### A stadium-shaped node -``` +```mermaid-code graph LR id1([This is the text in the box]) ``` @@ -108,7 +108,7 @@ graph LR ### A node in a subroutine shape -``` +```mermaid-code graph LR id1[[This is the text in the box]] ``` @@ -119,7 +119,7 @@ graph LR ### A node in a cylindrical shape -``` +```mermaid-code graph LR id1[(Database)] ``` @@ -130,7 +130,7 @@ graph LR ### A node in the form of a circle -``` +```mermaid-code graph LR id1((This is the text in the circle)) ``` @@ -141,7 +141,7 @@ graph LR ### A node in an asymmetric shape -``` +```mermaid-code graph LR id1>This is the text in the box] ``` @@ -153,7 +153,7 @@ Currently only the shape above is possible and not its mirror. *This might chang ### A node (rhombus) -``` +```mermaid-code graph LR id1{This is the text in the box} ``` @@ -164,7 +164,7 @@ graph LR ### A hexagon node {% raw %} -``` +```mermaid-code graph LR id1{{This is the text in the box}} ``` @@ -179,7 +179,7 @@ graph LR ### Parallelogram -``` +```mermaid-code graph TD id1[/This is the text in the box/] ``` @@ -190,7 +190,7 @@ graph TD ### Parallelogram alt -``` +```mermaid-code graph TD id1[\This is the text in the box\] ``` @@ -201,7 +201,7 @@ graph TD ### Trapezoid -``` +```mermaid-code graph TD A[/Christmas\] ``` @@ -211,7 +211,7 @@ graph TD ``` ### Trapezoid alt -``` +```mermaid-code graph TD B[\Go shopping/] ``` @@ -226,7 +226,7 @@ Nodes can be connected with links/edges. It is possible to have different types ### A link with arrow head -``` +```mermaid-code graph LR A-->B ``` @@ -237,7 +237,7 @@ graph LR ### An open link -``` +```mermaid-code graph LR A --- B ``` @@ -248,7 +248,7 @@ graph LR ### Text on links -``` +```mermaid-code graph LR A-- This is the text! ---B ``` @@ -259,7 +259,7 @@ graph LR or -``` +```mermaid-code graph LR A---|This is the text|B ``` @@ -270,7 +270,7 @@ graph LR ### A link with arrow head and text -``` +```mermaid-code graph LR A-->|text|B ``` @@ -281,7 +281,7 @@ graph LR or -``` +```mermaid-code graph LR A-- text -->B ``` @@ -292,7 +292,7 @@ graph LR ### Dotted link -``` +```mermaid-code graph LR; A-.->B; ``` @@ -303,7 +303,7 @@ graph LR; ### Dotted link with text -``` +```mermaid-code graph LR A-. text .-> B ``` @@ -314,7 +314,7 @@ graph LR ### Thick link -``` +```mermaid-code graph LR A ==> B ``` @@ -325,7 +325,7 @@ graph LR ### Thick link with text -``` +```mermaid-code graph LR A == text ==> B ``` @@ -337,7 +337,7 @@ graph LR ### Chaining of links It is possible to declare many links in the same line as per below: -``` +```mermaid-code graph LR A -- text --> B -- text2 --> C ``` @@ -347,7 +347,7 @@ graph LR ``` It is also possible to declare multiple nodes links in the same line as per below: -``` +```mermaid-code graph LR a --> b & c--> d ``` @@ -357,7 +357,7 @@ graph LR ``` You can then describe dependencies in a very expressive way. Like the one-liner below: -``` +```mermaid-code graph TB A & B--> C & D ``` @@ -369,7 +369,7 @@ If you describe the same diagram using the the basic syntax, it will take four l 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. -``` +```mermaid-code graph TB A --> C A --> D @@ -381,7 +381,7 @@ graph TB When using flowchart instead of graph there are new types of arrows supported as per below: -``` +```mermaid-code flowchart LR A --o B B --x C @@ -398,7 +398,7 @@ flowchart LR When using flowchart instead of graph there is the possibility to use multidirectional arrows. -``` +```mermaid-code flowchart LR A o--o B B <--> C @@ -423,7 +423,7 @@ than the others by adding extra dashes in the link definition. In the following example, two extra dashes are added in the link from node _B_ to node _E_, so that it spans two more ranks than regular links: -``` +```mermaid-code graph TD A[Start] --> B{Is it?}; B -->|Yes| C[OK]; @@ -448,7 +448,7 @@ When the link label is written in the middle of the link, the extra dashes must be added on the right side of the link. The following example is equivalent to the previous one: -``` +```mermaid-code graph TD A[Start] --> B{Is it?}; B -- Yes --> C[OK]; @@ -482,7 +482,7 @@ as summed up in the following table: It is possible to put text within quotes in order to render more troublesome characters. As in the example below: -``` +```mermaid-code graph LR id1["This is the (text) in the box"] ``` @@ -495,7 +495,7 @@ graph LR It is possible to escape characters using the syntax exemplified here. -``` +```mermaid-code graph LR A["A double quote:#quot;"] -->B["A dec char:#9829;"] ``` @@ -514,7 +514,7 @@ end An example below: -``` +```mermaid-code graph TB c1-->a2 subgraph one @@ -543,7 +543,7 @@ graph TB You can also set an explicit id for the subgraph. -``` +```mermaid-code graph TB c1-->a2 subgraph ide1 [one] @@ -562,7 +562,7 @@ graph TB With the graphtype flowcharts it is also possible to set edges to and from subgraphs as in the graph below. -``` +```mermaid-code flowchart TB c1-->a2 subgraph one @@ -618,7 +618,7 @@ Examples of tooltip usage below: ``` -``` +```mermaid-code graph LR; A-->B; B-->C; @@ -646,7 +646,7 @@ graph LR ?> 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-code graph LR; A-->B; B-->C; @@ -707,7 +707,7 @@ Beginners tip, a full example using interactive links in a html context: 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 after the start of the comment to the next newline will be treated as a comment, including any flow syntax -``` +```mermaid-code graph LR %% this is a comment A -- text --> B{node} A -- text --> B -- text2 --> C @@ -751,7 +751,7 @@ linkStyle default interpolate cardinal stroke:#ff3,stroke-width:4px,color:red; It is possible to apply specific styles such as a thicker border or a different background color to a node. -``` +```mermaid-code graph LR id1(Start)-->id2(Stop) style id1 fill:#f9f,stroke:#333,stroke-width:4px @@ -791,7 +791,7 @@ It is also possible to attach a class to a list of nodes in one statement: A shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below: -``` +```mermaid-code graph LR A:::someclass --> B classDef someclass fill:#f96; @@ -822,7 +822,7 @@ below: **Example definition** -``` +```mermaid-code graph LR; A-->B[AAABBB]; B-->D; @@ -851,7 +851,7 @@ It is possible to add icons from fontawesome. The icons are accessed via the syntax fa:#icon class name#. -``` +```mermaid-code graph TD B["fa:fa-twitter for peace"] B-->C[fa:fa-ban forbidden] @@ -875,7 +875,7 @@ graph TD Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges. -``` +```mermaid-code graph LR A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} diff --git a/docs/directives.md b/docs/directives.md index 5c51348cb..6d20f7ac0 100644 --- a/docs/directives.md +++ b/docs/directives.md @@ -21,7 +21,7 @@ The json object that is passed as {**argument** } must be valid key value pairs Valid Key Value pairs can be found in config. The init/initialize directive is parsed earlier in the flow, this allows the incorporation of `%%init%%` directives into the mermaid diagram that is being rendered. Example: -``` +```mermaid-code %%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%% graph > A-->B @@ -31,7 +31,7 @@ will set the `logLevel` to `debug` and the `theme` to `dark` for a flowchart dia Note: 'init' or 'initialize' are both acceptable as init directives. Also note that `%%init%%` and `%%initialize%%` directives will be grouped together after they are parsed. This means: -``` +```mermaid-code %%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%% %%{initialize: { 'logLevel': 'fatal', "theme":'dark', 'startOnLoad': true } }%% ... @@ -39,7 +39,7 @@ Note: 'init' or 'initialize' are both acceptable as init directives. Also note t parsing the above generates the `%%init%%` object below, combining the two directives and carrying over the last value given for `loglevel`: -``` +```json5 { logLevel: 'fatal', theme: 'dark', @@ -54,7 +54,7 @@ This will then be sent to `mermaid.initialize(...)` for rendering. In this category are any directives that come after the graph type declaration. Essentially, these directives will only be processed after the init directive. Each individual graph type will handle these directives. As an example: -``` +```mermaid-code %%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%% sequenceDiagram %%{config: { 'fontFamily': 'Menlo', 'fontSize': 18, 'fontWeight': 400} }%% diff --git a/docs/entityRelationshipDiagram.md b/docs/entityRelationshipDiagram.md index 0aa882424..171081d23 100644 --- a/docs/entityRelationshipDiagram.md +++ b/docs/entityRelationshipDiagram.md @@ -117,7 +117,7 @@ Cardinality is a property that describes how many elements of another entity can Relationships may be classified as either *identifying* or *non-identifying* and these are rendered with either solid or dashed lines respectively. This is relevant when one of the entities in question can not have independent existence without the other. For example a firm that insures people to drive cars might need to store data on `NAMED-DRIVER`s. In modelling this we might start out by observing that a `CAR` can be driven by many `PERSON` instances, and a `PERSON` can drive many `CAR`s - both entities can exist without the other, so this is a non-identifying relationship that we might specify in Mermaid as: `PERSON }|..|{ CAR : "driver"`. Note the two dots in the middle of the relationship that will result in a dashed line being drawn between the two entities. But when this many-to-many relationship is resolved into two one-to-many relationships, we observe that a `NAMED-DRIVER` cannot exist without both a `PERSON` and a `CAR` - the relationships become identifying and would be specified using hyphens, which translate to a solid line: -``` +```mermaid-code CAR ||--o{ NAMED-DRIVER : allows PERSON ||--o{ NAMED-DRIVER : is ``` @@ -126,7 +126,7 @@ Relationships may be classified as either *identifying* or *non-identifying* and Attributes can be defined for entities by specifying the entity name followed by a block containing multiple `type name` pairs, where a block is delimited by an opening `{` and a closing `}`. For example: -``` +```mermaid-code erDiagram CAR ||--o{ NAMED-DRIVER : allows CAR { @@ -158,7 +158,7 @@ erDiagram ``` The attributes are rendered inside the entity boxes: -``` +```mermaid-code erDiagram CAR ||--o{ NAMED-DRIVER : allows CAR { @@ -195,7 +195,7 @@ The `type` and `name` values must begin with an alphabetic character and may con Attributes may also have a `key` or comment defined. Keys can be "PK" or "FK", for Primary Key or Foreign Key. And a `comment` is defined by quotes at the end of an attribute. Comments themselves cannot have quote characters in them. -``` +```mermaid-code erDiagram CAR ||--o{ NAMED-DRIVER : allows CAR { diff --git a/docs/examples.md b/docs/examples.md index d4493ef28..2fc3a74c2 100644 --- a/docs/examples.md +++ b/docs/examples.md @@ -8,7 +8,7 @@ This page contains a collection of examples of diagrams and charts that can be c ## Basic Pie Chart -``` +```mermaid-code pie title NETFLIX "Time spent looking for movie" : 90 "Time spent watching it" : 10 @@ -18,7 +18,7 @@ pie title NETFLIX "Time spent looking for movie" : 90 "Time spent watching it" : 10 ``` -``` +```mermaid-code pie title What Voldemort doesn't have? "FRIENDS" : 2 "FAMILY" : 3 @@ -32,7 +32,7 @@ pie title What Voldemort doesn't have? ``` ## Basic sequence diagram -``` +```mermaid-code sequenceDiagram Alice ->> Bob: Hello Bob, how are you? Bob-->>John: How about you John? @@ -57,7 +57,7 @@ sequenceDiagram ## Basic flowchart -``` +```mermaid-code graph LR A[Square Rect] -- Link text --> B((Circle)) A --> C(Round Rect) @@ -75,7 +75,7 @@ graph LR ## Larger flowchart with some styling -``` +```mermaid-code graph TB sq[Square shape] --> ci((Circle shape)) @@ -125,7 +125,7 @@ graph TB ## SequenceDiagram: Loops, alt and opt -``` +```mermaid-code sequenceDiagram loop Daily query Alice->>Bob: Hello Bob, how are you? @@ -159,7 +159,7 @@ sequenceDiagram ## SequenceDiagram: Message to self in loop -``` +```mermaid-code sequenceDiagram participant Alice participant Bob diff --git a/docs/flowchart.md b/docs/flowchart.md index ab8d43bdb..c71282611 100644 --- a/docs/flowchart.md +++ b/docs/flowchart.md @@ -10,7 +10,7 @@ It can also accomodate different arrow types, multi directional arrows, and link Node ### A node (default) -``` +```mermaid-code flowchart LR id ``` @@ -28,7 +28,7 @@ It is also possible to set text in the box that differs from the id. If this is found for the node that will be used. Also if you define edges for the node later on, you can omit text definitions. The one previously defined will be used when rendering the box. -``` +```mermaid-code flowchart LR id1[This is the text in the box] ``` @@ -43,7 +43,7 @@ This statement declares the direction of the Flowchart. This declares the flowchart is oriented from top to bottom (`TD` or `TB`). -``` +```mermaid-code flowchart TD Start --> Stop ``` @@ -54,7 +54,7 @@ flowchart TD This declares the flowchart is oriented from left to right (`LR`). -``` +```mermaid-code flowchart LR Start --> Stop ``` @@ -77,7 +77,7 @@ Possible FlowChart orientations are: ### A node with round edges -``` +```mermaid-code flowchart LR id1(This is the text in the box) ``` @@ -88,7 +88,7 @@ flowchart LR ### A stadium-shaped node -``` +```mermaid-code flowchart LR id1([This is the text in the box]) ``` @@ -99,7 +99,7 @@ flowchart LR ### A node in a subroutine shape -``` +```mermaid-code flowchart LR id1[[This is the text in the box]] ``` @@ -110,7 +110,7 @@ flowchart LR ### A node in a cylindrical shape -``` +```mermaid-code flowchart LR id1[(Database)] ``` @@ -121,7 +121,7 @@ flowchart LR ### A node in the form of a circle -``` +```mermaid-code flowchart LR id1((This is the text in the circle)) ``` @@ -132,7 +132,7 @@ flowchart LR ### A node in an asymmetric shape -``` +```mermaid-code flowchart LR id1>This is the text in the box] ``` @@ -144,7 +144,7 @@ Currently only the shape above is possible and not its mirror. *This might chang ### A node (rhombus) -``` +```mermaid-code flowchart LR id1{This is the text in the box} ``` @@ -154,7 +154,7 @@ flowchart LR ``` ### A hexagon node -``` +```mermaid-code flowchart LR id1{{This is the text in the box}} ``` @@ -166,7 +166,7 @@ flowchart LR ### Parallelogram -``` +```mermaid-code flowchart TD id1[/This is the text in the box/] ``` @@ -177,7 +177,7 @@ flowchart TD ### Parallelogram alt -``` +```mermaid-code flowchart TD id1[\This is the text in the box\] ``` @@ -188,7 +188,7 @@ flowchart TD ### Trapezoid -``` +```mermaid-code flowchart TD A[/Christmas\] ``` @@ -198,7 +198,7 @@ flowchart TD ``` ### Trapezoid alt -``` +```mermaid-code flowchart TD B[\Go shopping/] ``` @@ -213,7 +213,7 @@ Nodes can be connected with links/edges. It is possible to have different types ### A link with arrow head -``` +```mermaid-code flowchart LR A-->B ``` @@ -224,7 +224,7 @@ flowchart LR ### An open link -``` +```mermaid-code flowchart LR A --- B ``` @@ -235,7 +235,7 @@ flowchart LR ### Text on links -``` +```mermaid-code flowchart LR A-- This is the text! ---B ``` @@ -246,7 +246,7 @@ flowchart LR or -``` +```mermaid-code flowchart LR A---|This is the text|B ``` @@ -257,7 +257,7 @@ flowchart LR ### A link with arrow head and text -``` +```mermaid-code flowchart LR A-->|text|B ``` @@ -268,7 +268,7 @@ flowchart LR or -``` +```mermaid-code flowchart LR A-- text -->B ``` @@ -279,7 +279,7 @@ flowchart LR ### Dotted link -``` +```mermaid-code flowchart LR; A-.->B; ``` @@ -290,7 +290,7 @@ flowchart LR; ### Dotted link with text -``` +```mermaid-code flowchart LR A-. text .-> B ``` @@ -301,7 +301,7 @@ flowchart LR ### Thick link -``` +```mermaid-code flowchart LR A ==> B ``` @@ -312,7 +312,7 @@ flowchart LR ### Thick link with text -``` +```mermaid-code flowchart LR A == text ==> B ``` @@ -324,7 +324,7 @@ flowchart LR ### Chaining of links It is possible declare many links in the same line as per below: -``` +```mermaid-code flowchart LR A -- text --> B -- text2 --> C ``` @@ -334,7 +334,7 @@ flowchart LR ``` It is also possible to declare multiple nodes links in the same line as per below: -``` +```mermaid-code flowchart LR a --> b & c--> d ``` @@ -344,7 +344,7 @@ flowchart LR ``` You can then describe dependencies in a very expressive way. Like the one-liner below: -``` +```mermaid-code flowchart TB A & B--> C & D ``` @@ -356,7 +356,7 @@ If you describe the same diagram using the the basic syntax, it will take four l word of warning, one could go overboard with this making the flowchart harder to read in markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little. This goes for expressive syntaxes as well. -``` +```mermaid-code flowchart TB A --> C A --> D @@ -368,7 +368,7 @@ flowchart TB There are new types of arrows supported as per below: -``` +```mermaid-code flowchart LR A --o B B --x C @@ -385,7 +385,7 @@ flowchart LR There is the possibility to use multidirectional arrows. -``` +```mermaid-code flowchart LR A o--o B B <--> C @@ -410,7 +410,7 @@ than the others by adding extra dashes in the link definition. In the following example, two extra dashes are added in the link from node _B_ to node _E_, so that it spans two more ranks than regular links: -``` +```mermaid-code flowchart TD A[Start] --> B{Is it?}; B -->|Yes| C[OK]; @@ -435,7 +435,7 @@ When the link label is written in the middle of the link, the extra dashes must be added on the right side of the link. The following example is equivalent to the previous one: -``` +```mermaid-code flowchart TD A[Start] --> B{Is it?}; B -- Yes --> C[OK]; @@ -469,7 +469,7 @@ as summed up in the following table: It is possible to put text within quotes in order to render more troublesome characters. As in the example below: -``` +```mermaid-code flowchart LR id1["This is the (text) in the box"] ``` @@ -482,7 +482,7 @@ flowchart LR It is possible to escape characters using the syntax exemplified here. -``` +```mermaid-code flowchart LR A["A double quote:#quot;"] -->B["A dec char:#9829;"] ``` @@ -503,7 +503,7 @@ end An example below: -``` +```mermaid-code flowchart TB c1-->a2 subgraph one @@ -532,7 +532,7 @@ flowchart TB You can also set an explicit id for the subgraph. -``` +```mermaid-code flowchart TB c1-->a2 subgraph ide1 [one] @@ -551,7 +551,7 @@ flowchart TB With the graphtype flowcharts it is also possible to set edges to and from subgraphs as in the flowchart below. -``` +```mermaid-code flowchart TB c1-->a2 subgraph one @@ -589,7 +589,7 @@ flowchart TB With the graphtype flowcharts you can use the direction statement to set the direction which the subgraph will render like in this example. -``` +```mermaid-code flowchart LR subgraph TOP direction TB @@ -646,7 +646,7 @@ Examples of tooltip usage below: ``` -``` +```mermaid-code flowchart LR; A-->B; B-->C; @@ -674,7 +674,7 @@ flowchart LR ?> 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-code flowchart LR; A-->B; B-->C; @@ -735,7 +735,7 @@ Beginners tip, a full example using interactive links in a html context: 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 after the start of the comment to the next newline will be treated as a comment, including any flow syntax -``` +```mermaid-code flowchart LR %% this is a comment A -- text --> B{node} A -- text --> B -- text2 --> C @@ -750,7 +750,7 @@ have no ids in the same way as nodes, some other way of deciding what style the Instead of ids, the order number of when the link was defined in the graph is used. In the example below the style defined in the linkStyle statement will belong to the fourth link in the graph: -``` +```mermaid-code linkStyle 3 stroke:#ff3,stroke-width:4px,color:red; ``` @@ -759,7 +759,7 @@ linkStyle 3 stroke:#ff3,stroke-width:4px,color:red; It is possible to apply specific styles such as a thicker border or a different background color to a node. -``` +```mermaid-code flowchart LR id1(Start)-->id2(Stop) style id1 fill:#f9f,stroke:#333,stroke-width:4px @@ -799,7 +799,7 @@ It is also possible to attach a class to a list of nodes in one statement: A shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below: -``` +```mermaid-code flowchart LR A:::someclass --> B classDef someclass fill:#f96; @@ -830,7 +830,7 @@ below: **Example definition** -``` +```mermaid-code flowchart LR; A-->B[AAABBB]; B-->D; @@ -859,7 +859,7 @@ It is possible to add icons from fontawesome. The icons are accessed via the syntax fa:#icon class name#. -``` +```mermaid-code flowchart TD B["fa:fa-twitter for peace"] B-->C[fa:fa-ban forbidden] @@ -883,7 +883,7 @@ flowchart TD Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges. -``` +```mermaid-code flowchart LR A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} diff --git a/docs/gantt.md b/docs/gantt.md index 7f248d98f..6b84ff3f3 100644 --- a/docs/gantt.md +++ b/docs/gantt.md @@ -17,7 +17,7 @@ Mermaid can render Gantt diagrams as SVG, PNG or a MarkDown link that can be pasted into docs. -``` +```mermaid-code gantt title A Gantt Diagram dateFormat YYYY-MM-DD @@ -106,13 +106,13 @@ gantt ``` It is possible to set multiple dependencies separated by space: -``` +```mermaid-code gantt apple :a, 2017-07-20, 1w banana :crit, b, 2017-07-23, 1d cherry :active, c, after b a, 1d ``` -``` +```mermaid-code gantt apple :a, 2017-07-20, 1w banana :crit, b, 2017-07-23, 1d @@ -135,7 +135,7 @@ To do so, start a line with the `section` keyword and give it a name. (Note that 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-code gantt dateFormat HH:mm axisFormat %H:%M @@ -238,7 +238,7 @@ More info in: https://github.com/mbostock/d3/wiki/Time-Formatting Comments can be entered within a gantt 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 -``` +```mermaid-code gantt title A Gantt Diagram %% this is a comment diff --git a/docs/index.html b/docs/index.html index e40d49073..81ec0bfeb 100644 --- a/docs/index.html +++ b/docs/index.html @@ -22,6 +22,12 @@ } + + + + + +