Skip to content

Mermaid plugin for Inkdrop which lets you draw diagrams and flowcharts

License

Notifications You must be signed in to change notification settings

inkdropapp/inkdrop-mermaid

Repository files navigation

Mermaid plugin for Inkdrop

A plugin for drawing flowcharts and diagrams using mermaid.js in Markdown code block.

Install

Check out the docs on how to install plugins.

Command-line

ipm install mermaid

Usage

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

It will be rendered as:

Flowchart example

```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:

Sequence diagram example

Customizations

You can configure mermaid options in Preferences.

Mermaid supports custom theme variables:

Options

Note: You have to reload the app to get the custom theme CSS and variables applied.

Inline theming

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:

Inline theming example

More details can be found on the Mermaid documentation.

Changelog

2.7.0 [Feb 8, 2024]

  • Bump up Mermaid to v10.6.1
    • Support Sequence Diagram Actor Creation and Destruction (Thanks @johmsalas)

2.6.0 [Aug 28, 2023]

  • Support lazy loading

2.5.3 [Jun 2, 2023]

2.5.1 [Jul 7, 2022]

2.5.0 [May 21, 2022]

  • Bump up Mermaid to v9.1.1 (Thanks dkarter)

2.4.0 [Jan 30, 2022]

  • 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

2.3.0 [April 13, 2021]

Updated to the latest mermaid version (8.9.2)

2.2.0 [October 2, 2020]

Updated to the latest mermaid version (8.8.0)

2.1.0 [December 20, 2019]

Updated to the latest mermaid version

1.0.0 - First Release

About

Mermaid plugin for Inkdrop which lets you draw diagrams and flowcharts

Resources

License

Stars

Watchers

Forks

Packages

No packages published