mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-08-23 18:26:39 +02:00
Switch from mermaid-code -> mmd
This commit is contained in:
@@ -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
|
||||
|
@@ -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)
|
||||
|
@@ -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
|
||||
|
@@ -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
|
||||
|
@@ -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
|
||||
|
@@ -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} }%%
|
||||
|
@@ -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
|
||||
|
@@ -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
|
||||
|
@@ -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
|
||||
|
@@ -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 += (
|
||||
|
@@ -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
|
||||
|
@@ -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 --> [*]
|
||||
|
@@ -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)
|
||||
|
Reference in New Issue
Block a user