A plugin for drawing flowcharts and diagrams using mermaid.js in Markdown code block.
Check out the docs on how to install plugins.
ipm install mermaid```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
It will be rendered as:
```mermaid
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail...
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly gooda!
```
It will be rendered as:
You can configure mermaid options in Preferences.
Mermaid supports custom theme variables:
Note: You have to reload the app to get the custom theme CSS and variables applied.
It is also possible to override theme settings locally, for a specific diagram, using directives %%init%% like so:
```mermaid
%%{init:{
'theme':'base',
'themeVariables': {
'primaryColor':'#6A7FAB',
'primaryTextColor':'#FAFBF9',
'primaryBorderColor':'#6A7FAB',
'lineColor':'#6A7FABCC',
'textColor':'#6A7FABCC',
'fontSize':'16px'
}
}}%%
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
It yields:
More details can be found on the Mermaid documentation.
- Bump up Mermaid to v10.9.3
- Bump up Mermaid to v10.6.1
- Support Sequence Diagram Actor Creation and Destruction (Thanks @johmsalas)
- Support lazy loading
- Bump up Mermaid to v9.4.3
- Bump up Mermaid to v9.1.3
- Update to the latest mermaid version (8.13.10)
- Dropdown list for changing theme
- Custom theme CSS
- Custom theme variables
- Allow disabling auto-scaling diagrams
Updated to the latest mermaid version (8.9.2)
Updated to the latest mermaid version (8.8.0)
Updated to the latest mermaid version