Generate diagrams in your readme files
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin
diagrams
tests
.gitignore
.travis.yml
README.md
index.js
package-lock.json
package.json

README.md

readme diagrams generator

Generate diagrams in your readme files like this one:

diagram

raw
Note left of user: Create readme with code block and image placeholder
user->generator: Start generator 
Note right of generator: Scans for code blocks and image placeholders
Note right of generator: Creates diagrams
generator->user: Code ready to commit and push

Install

npm install -g readme-diagram

Currently there is an issue with installing electron. If you run across issue Error: EACCES: permission denied, mkdir '<...>readme-diagram/node_modules/electron/.electron' try to install package with command: npm install -g readme-diagram --unsafe-perm=true --allow-root

Usage

In readme file place image holder:

![Some text](relative/path/to/file.svg)

Then after that place a code block with language corresponding to code-name of diagram:

    ```js-sequence-diagram
    Alice->Bob: Hello Bob, how are you?
    Note right of Bob: Bob thinks
    Bob-->Alice: I am good thanks!
    ```

To hide this code block put it into details:

<details><summary>raw</summary>
    ...
</details>

Run generator:

readme-diagram --file my-readme.md

Generator will create diagrams and save them in path from image holder (in this example relative/path/to/file.svg which is relative to readme file).

Supported diagrams and code-names

This tool supports diagrams from https://github.com/francoislaberge/diagrams

diagram type code-name
flowchart js-flowchart-diagram
sequence js-sequence-diagram
dot js-dot-diagram
railroad js-railroad-diagram