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)

License

MIT