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**:
```mermaid-code
```mmd
%%{init: {"theme": "default", "logLevel": 1 }}%%
graph LR
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:**
```mermaid-code
```mmd
%%{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
```mmd
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
graph TD
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)
```mermaid-code
```mmd
graph TD;
A-->B;
A-->C;
@@ -60,7 +60,7 @@ graph TD;
### [Sequence diagram](./sequenceDiagram.md)
```mermaid-code
```mmd
sequenceDiagram
participant Alice
participant Bob
@@ -78,7 +78,7 @@ sequenceDiagram
### [Gantt diagram](./gantt.md)
```mermaid-code
```mmd
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
```mmd
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
@@ -116,7 +116,7 @@ Class08 <--> C2: Cool label
### Git graph - :exclamation: experimental
```mermaid-code
```mmd
gitGraph:
options
{
@@ -139,7 +139,7 @@ merge newbranch
### [Entity Relationship Diagram - :exclamation: experimental](./entityRelationshipDiagram.md)
```mermaid-code
```mmd
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
@@ -151,7 +151,7 @@ erDiagram
### [User Journey Diagram](./user-journey.md)
```mermaid-code
```mmd
journey
title My working day
section Go to work

View File

@@ -224,7 +224,7 @@ classE o-- classF : association
Relations can go in multiple ways:
```mermaid-code
```mmd
classDiagram
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
```mermaid-code
```mmd
classDiagram
%% This whole line is a comment classDiagram class Shape <<interface>>
class Shape{
@@ -382,7 +382,7 @@ click className href "url" "tooltip"
_URL Link:_
```mermaid-code
```mmd
classDiagram
class Shape
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:_
```mermaid-code
```mmd
classDiagram
class Shape
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:
```mermaid-code
```mmd
classDiagram
class Animal:::cssClass
```
Or:
```mermaid-code
```mmd
classDiagram
class Animal:::cssClass {
-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
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
```mmd
graph TB
A --> C
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
```mermaid-code
```mmd
graph LR
%% this is a comment A -- text --> B{node}
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.
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' } }%%
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
```mmd
%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
%%{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:
```mermaid-code
```mmd
%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
sequenceDiagram
%%{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:
```mermaid-code
```mmd
erDiagram
CAR ||--o{ NAMED-DRIVER : allows
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
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
```mmd
flowchart TB
A --> C
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
```mermaid-code
```mmd
flowchart LR
%% this is a comment A -- text --> B{node}
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
```mermaid-code
```mmd
gantt
title A Gantt Diagram
%% this is a comment

View File

@@ -66,10 +66,10 @@
markdown: {
renderer: {
code: function(code, lang) {
if (lang.startsWith('mermaid')) {
if (lang.startsWith('mermaid') || lang === 'mmd') {
var resultingHTML = '';
if (lang === "mermaid-code" || lang === 'mermaid-example') {
if (lang === "mmd" || lang === 'mermaid-example') {
currentCodeExample++;
colorize.push(currentCodeExample);
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
```mermaid-code
```mmd
sequenceDiagram
Alice->>John: Hello John, how are you?
%% 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>
```
```mermaid-code
```mmd
sequenceDiagram
participant Alice
participant John
@@ -361,7 +361,7 @@ links <actor>: <json-formatted link-name link-url pairs>
An example is below:
```mermaid-code
```mmd
sequenceDiagram
participant Alice
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
```mermaid-code
```mmd
stateDiagram-v2
[*] --> 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.
```mermaid-code
```mmd
%%{init: {'theme':'base'}}%%
graph TD
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)
### Flowchart
```mermaid-code
```mmd
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)