diff --git a/docs/8.6.0_docs.md b/docs/8.6.0_docs.md index 8c05c6062..68da8f868 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 +```mmd %%{init: {"theme": "default", "logLevel": 1 }}%% graph LR a-->b diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 9e4bea2dd..7b993fd2b 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 +```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) diff --git a/docs/README.md b/docs/README.md index bf503f39e..63ece825e 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 +```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 diff --git a/docs/classDiagram.md b/docs/classDiagram.md index 9ae6abc9b..c03adca6d 100644 --- a/docs/classDiagram.md +++ b/docs/classDiagram.md @@ -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 <> 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 diff --git a/docs/diagrams-and-syntax-and-examples/flowchart.md b/docs/diagrams-and-syntax-and-examples/flowchart.md index ef4d3b978..843da5ab1 100644 --- a/docs/diagrams-and-syntax-and-examples/flowchart.md +++ b/docs/diagrams-and-syntax-and-examples/flowchart.md @@ -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 diff --git a/docs/directives.md b/docs/directives.md index 6d20f7ac0..c0e61c4f7 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 +```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} }%% diff --git a/docs/entityRelationshipDiagram.md b/docs/entityRelationshipDiagram.md index 2cbfb9549..f178878f0 100644 --- a/docs/entityRelationshipDiagram.md +++ b/docs/entityRelationshipDiagram.md @@ -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 diff --git a/docs/flowchart.md b/docs/flowchart.md index c5be8bfbc..2868008d3 100644 --- a/docs/flowchart.md +++ b/docs/flowchart.md @@ -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 diff --git a/docs/gantt.md b/docs/gantt.md index acd9f67ae..6140aa1b5 100644 --- a/docs/gantt.md +++ b/docs/gantt.md @@ -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 diff --git a/docs/index.html b/docs/index.html index 7d78b14bb..9c381da99 100644 --- a/docs/index.html +++ b/docs/index.html @@ -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 += ( diff --git a/docs/sequenceDiagram.md b/docs/sequenceDiagram.md index 673efc42f..0d342f2f1 100644 --- a/docs/sequenceDiagram.md +++ b/docs/sequenceDiagram.md @@ -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 : @ ``` -```mermaid-code +```mmd sequenceDiagram participant Alice participant John @@ -361,7 +361,7 @@ links : An example is below: -```mermaid-code +```mmd sequenceDiagram participant Alice participant John diff --git a/docs/stateDiagram.md b/docs/stateDiagram.md index 98c4ebfb8..50c9ef646 100644 --- a/docs/stateDiagram.md +++ b/docs/stateDiagram.md @@ -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 --> [*] diff --git a/docs/theming.md b/docs/theming.md index 82150d64e..9c953dd00 100644 --- a/docs/theming.md +++ b/docs/theming.md @@ -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)