mimc
Mermaid Image Markdown Creator
The command-line solution for creating mermaid diagrams and visualizations in markdown (ex: bitbucket) by generating the png and automatically importing them.
Installation
npm install mimc
Quick Start
You can write code the diagram code with help of mermaid live editor.
Usage
In the README.md file add the <div data-mermaid>
.
<div data-mermaid data-title="Mermaid Sequence Diagram">
<code>
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 good!
</code>
</div>
Data attributes
Attribute | Description | Required |
---|---|---|
data-mermaid | Used to create the name of the files. If empty will be auto-generated | true |
data-title | Create title and alt attribute in the generated diagram | false |
data-transparent | Generate images with transparent background | false |
data-width | Width of the generated image | false |
data-height | Height of the generated image | false |
Run
globally installed:
mimc
locally installed:
npx mimc
This will generate additional element in the <div class="data-mermaid">
after <code>
and code will be stored in separate txt file.
<div class="data-diagram">
<img src="docs/sequence-diagram.png" title="Mermaid Sequence Diagram" alt="Mermaid Sequence Diagram"/>
</div>
Output
<div data-mermaid="1646256939884" data-title="Mermaid Sequence Diagram">
<!-- Code file located in docs -->
<div class="data-diagram">
<!-- Image auto generated on Wed Mar 02 2022 22:35:42 GMT+0100 (Central European Standard Time) -->
<img src="docs/diagram-1646256939884.png" title="Mermaid Sequence Diagram" alt="Mermaid Sequence Diagram"/>
</div></div>
❗ txt code file can be updated in order to generate new image
Demo
Options
The options
can be passed as the parameter.
Option | Default Value | Description |
---|---|---|
-o, --images-ouput | 'docs' | Folder where images will be placed |
-c, --common-image-output | false | All images will be placed in the same folder |
-p, --path | './' | Pathname where the mimc will start the search for markdown file |
-m, --markdown-file | 'README.md' | Name of the markdown file |
-e, --exclude | [] | Exclude folders. node_modules will always be excluded by default |
-x, --img-ext | svg | image file extension (png, jpeg or svg) |