Switch from mermaid-code -> mmd

This commit is contained in:
Yash-Singh1
2021-11-10 18:04:40 -08:00
parent 2ae442accc
commit d140a9df8f
13 changed files with 33 additions and 33 deletions

View File

@@ -73,7 +73,7 @@ When deployed within code, init is called before the graph/diagram description.
``` ```
**for example**: **for example**:
```mermaid-code ```mmd
%%{init: {"theme": "default", "logLevel": 1 }}%% %%{init: {"theme": "default", "logLevel": 1 }}%%
graph LR graph LR
a-->b a-->b

View File

@@ -39,7 +39,7 @@ It is also possible to override site-wide theme settings locally, for a specific
**Following is an example:** **Following is an example:**
```mermaid-code ```mmd
%%{init: {'theme':'base'}}%% %%{init: {'theme':'base'}}%%
graph TD graph TD
a --> b 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%%`. Here is an example of overriding `primaryColor` and giving everything a different look, using `%%init%%`.
```mermaid-code ```mmd
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%% %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)

View File

@@ -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) ### [Flowchart](./flowchart.md?id=flowcharts-basic-syntax)
```mermaid-code ```mmd
graph TD; graph TD;
A-->B; A-->B;
A-->C; A-->C;
@@ -60,7 +60,7 @@ graph TD;
### [Sequence diagram](./sequenceDiagram.md) ### [Sequence diagram](./sequenceDiagram.md)
```mermaid-code ```mmd
sequenceDiagram sequenceDiagram
participant Alice participant Alice
participant Bob participant Bob
@@ -78,7 +78,7 @@ sequenceDiagram
### [Gantt diagram](./gantt.md) ### [Gantt diagram](./gantt.md)
```mermaid-code ```mmd
gantt gantt
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid title Adding GANTT diagram to mermaid
@@ -95,7 +95,7 @@ Future task2 : des4, after des3, 5d
### [Class diagram](./classDiagram.md) ### [Class diagram](./classDiagram.md)
```mermaid-code ```mmd
classDiagram classDiagram
Class01 <|-- AveryLongClass : Cool Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04 Class03 *-- Class04
@@ -116,7 +116,7 @@ Class08 <--> C2: Cool label
### Git graph - :exclamation: experimental ### Git graph - :exclamation: experimental
```mermaid-code ```mmd
gitGraph: gitGraph:
options options
{ {
@@ -139,7 +139,7 @@ merge newbranch
### [Entity Relationship Diagram - :exclamation: experimental](./entityRelationshipDiagram.md) ### [Entity Relationship Diagram - :exclamation: experimental](./entityRelationshipDiagram.md)
```mermaid-code ```mmd
erDiagram erDiagram
CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains ORDER ||--|{ LINE-ITEM : contains
@@ -151,7 +151,7 @@ erDiagram
### [User Journey Diagram](./user-journey.md) ### [User Journey Diagram](./user-journey.md)
```mermaid-code ```mmd
journey journey
title My working day title My working day
section Go to work section Go to work

View File

@@ -224,7 +224,7 @@ classE o-- classF : association
Relations can go in multiple ways: Relations can go in multiple ways:
```mermaid-code ```mmd
classDiagram classDiagram
Animal <|--|> Zebra Animal <|--|> Zebra
``` ```
@@ -328,7 +328,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 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 ```mmd
classDiagram classDiagram
%% This whole line is a comment classDiagram class Shape <<interface>> %% This whole line is a comment classDiagram class Shape <<interface>>
class Shape{ class Shape{
@@ -382,7 +382,7 @@ click className href "url" "tooltip"
_URL Link:_ _URL Link:_
```mermaid-code ```mmd
classDiagram classDiagram
class Shape class Shape
link Shape "http://www.github.com" "This is a tooltip for a link" link Shape "http://www.github.com" "This is a tooltip for a link"
@@ -392,7 +392,7 @@ click Shape2 href "http://www.github.com" "This is a tooltip for a link"
_Callback:_ _Callback:_
```mermaid-code ```mmd
classDiagram classDiagram
class Shape class Shape
callback Shape "callbackFunction" "This is a tooltip for a callback" callback Shape "callbackFunction" "This is a tooltip for a callback"
@@ -498,14 +498,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: A shorter form of adding a class is to attach the classname to the node using the `:::` operator as per below:
```mermaid-code ```mmd
classDiagram classDiagram
class Animal:::cssClass class Animal:::cssClass
``` ```
Or: Or:
```mermaid-code ```mmd
classDiagram classDiagram
class Animal:::cssClass { class Animal:::cssClass {
-int sizeInFeet -int sizeInFeet

View File

@@ -247,7 +247,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 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. 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. This goes for expressive syntaxes as well.
```mermaid-code ```mmd
graph TB graph TB
A --> C A --> C
A --> D A --> D
@@ -486,7 +486,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 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 ```mmd
graph LR graph LR
%% this is a comment A -- text --> B{node} %% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C A -- text --> B -- text2 --> C

View File

@@ -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. 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: 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 ```mmd
%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%% %%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
graph > graph >
A-->B 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: 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 ```mmd
%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%% %%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
%%{initialize: { 'logLevel': 'fatal', "theme":'dark', 'startOnLoad': true } }%% %%{initialize: { 'logLevel': 'fatal', "theme":'dark', 'startOnLoad': true } }%%
... ...
@@ -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: 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 ```mmd
%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%% %%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
sequenceDiagram sequenceDiagram
%%{config: { 'fontFamily': 'Menlo', 'fontSize': 18, 'fontWeight': 400} }%% %%{config: { 'fontFamily': 'Menlo', 'fontSize': 18, 'fontWeight': 400} }%%

View File

@@ -90,7 +90,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: 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 ```mmd
erDiagram erDiagram
CAR ||--o{ NAMED-DRIVER : allows CAR ||--o{ NAMED-DRIVER : allows
PERSON ||--o{ NAMED-DRIVER : is PERSON ||--o{ NAMED-DRIVER : is

View File

@@ -238,7 +238,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 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. 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. This goes for expressive syntaxes as well.
```mermaid-code ```mmd
flowchart TB flowchart TB
A --> C A --> C
A --> D A --> D
@@ -501,7 +501,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 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 ```mmd
flowchart LR flowchart LR
%% this is a comment A -- text --> B{node} %% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C A -- text --> B -- text2 --> C

View File

@@ -181,7 +181,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 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 ```mmd
gantt gantt
title A Gantt Diagram title A Gantt Diagram
%% this is a comment %% this is a comment

View File

@@ -66,10 +66,10 @@
markdown: { markdown: {
renderer: { renderer: {
code: function(code, lang) { code: function(code, lang) {
if (lang.startsWith('mermaid')) { if (lang.startsWith('mermaid') || lang === 'mmd') {
var resultingHTML = ''; var resultingHTML = '';
if (lang === "mermaid-code" || lang === 'mermaid-example') { if (lang === "mmd" || lang === 'mermaid-example') {
currentCodeExample++; currentCodeExample++;
colorize.push(currentCodeExample); colorize.push(currentCodeExample);
resultingHTML += ( resultingHTML += (

View File

@@ -281,7 +281,7 @@ sequenceDiagram
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 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
```mermaid-code ```mmd
sequenceDiagram sequenceDiagram
Alice->>John: Hello John, how are you? Alice->>John: Hello John, how are you?
%% this is a comment %% this is a comment
@@ -337,7 +337,7 @@ This can be configured by adding one or more link lines with the format:
``` ```
link <actor>: <link-label> @ <link-url> link <actor>: <link-label> @ <link-url>
``` ```
```mermaid-code ```mmd
sequenceDiagram sequenceDiagram
participant Alice participant Alice
participant John participant John
@@ -361,7 +361,7 @@ links <actor>: <json-formatted link-name link-url pairs>
An example is below: An example is below:
```mermaid-code ```mmd
sequenceDiagram sequenceDiagram
participant Alice participant Alice
participant John participant John

View File

@@ -235,7 +235,7 @@ stateDiagram
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
```mermaid-code ```mmd
stateDiagram-v2 stateDiagram-v2
[*] --> Still [*] --> Still
Still --> [*] Still --> [*]

View File

@@ -23,7 +23,7 @@ Example of `Initalize` call setting `theme` to `base`:
When Generating a diagram using on a webpage that supports mermaid. It is also possible to override site-wide theme settings locally, for a specific diagram, using directives, as long as it is not prohibited by the `secure` array. When Generating a diagram using on a webpage that supports mermaid. It is also possible to override site-wide theme settings locally, for a specific diagram, using directives, as long as it is not prohibited by the `secure` array.
```mermaid-code ```mmd
%%{init: {'theme':'base'}}%% %%{init: {'theme':'base'}}%%
graph TD graph TD
a --> b a --> b
@@ -241,7 +241,7 @@ When adjusting a theme it might be helpful to look at how your preferred theme g
In the following examples, the directive `init` is used, with the `theme` being declared as `base`. For more information on using directives, read the documentation for [Version 8.6.0](/8.6.0_docs.md) In the following examples, the directive `init` is used, with the `theme` being declared as `base`. For more information on using directives, read the documentation for [Version 8.6.0](/8.6.0_docs.md)
### Flowchart ### Flowchart
```mermaid-code ```mmd
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)