inkdropapp / inkdrop-mermaid

Mermaid plugin for Inkdrop which lets you draw diagrams and flowcharts

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 LR
    A --- B
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);
```

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:

Customizations

You can configure mermaid options in Preferences.

Mermaid supports custom theme variables:

• https://mermaid-js.github.io/mermaid/#/./theming?id=theme-variables-reference-table

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:

More details can be found on the Mermaid documentation.

Changelog

2.6.0 [Aug 28, 2023]

• Support lazy loading

2.5.3 [Jun 2, 2023]

• Bump up Mermaid to v9.4.3

2.5.1 [Jul 7, 2022]

• Bump up Mermaid to v9.1.3

2.5.0 [May 21, 2022]

• Bump up Mermaid to v9.1.1 (Thanks dkarter)
  • Adds new features such as gitGraph

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

inkdrop-mermaid's Issues

No arrow sign in Sequence Diagram

Using a code of sequence diagram, Alice/Bob/John example, the preview doesn't show the arrow while graph LP works fine. Inkdrop version 5.4.1 (Demo).

Specifying `tickInterval` causing Parse Error; upgrade mermaid to >=9.3?

Hi,

I was wondering if you can upgrade the plugin to use mermaid >= v9.3.0. In v9.3.0, mermaid adds a tickInterval option to gantt charts (mermaid-js/mermaid#3729).

Example code to reproduce error in inkdrop-mermaid v.2.5.2.

gantt
    title Roadmap
    dateFormat MM-YYYY
    axisFormat %b %Y
    tickInterval 1month
    excludes 07-2023
    
    section Section
    Task :crit, done, a1, 05-2023, 1M

Inkdrop render message

classDiagram Not working?

I seem to get this error with the latest plugin version:

Cannot read property 'members' of undefined

This is the code I am using:

classDiagram
  class BankAccount
  BankAccount : +String owner
  BankAccount : +Bigdecimal balance
  BankAccount : +deposit(amount)
  BankAccount : +withdrawl(amount)    

Sequence Diagram: Actor Creation and Destruction not available

Sequence Diagram Actor Creation and Destruction is added on mermaid v10.3.0

inkdrop-mermaid current version is 9.4.3

C4-PlantUML syntax support

mermaid version 9.1.2 includes experimental support for C4-PlantUML syntax. Is this gonna be supported in future by this plugin? Thanks in advance!

Does its support make it clickable to open another note?

I am interest of write a C4 model docs. It does need to many diagrams that can be jump between of them. Is there any way to click on a graph to open another graph or a different note?

Theming support doesn't take export into account

1. Set Inkdrop to Dark mode w/ Dark content
2. When you use Mermaid, you'll end up wanting to use the Dark mode in it to match
3. If you export as PDF, the page is not in dark mode so the mermaid diagram doesn't match the output

Recommendation would be to have a separate in-app theme setting vs print theme setting.