# readme-diagram

> Diagrams in readme

Latest version **1.0.3** (published 2019-01-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install readme-diagram
pnpm add readme-diagram
yarn add readme-diagram
bun add readme-diagram
```

Provides the command `readme-diagram`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2019-01-13 |
| First published | 2019-01-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 30.4 KB |
| Known vulnerabilities | 0 (+3 in 1 direct dependencies) |
| Install scripts | no |
| Author | Kasper Moskwiak |
| Maintainers | cosma |
| Keywords | readme, diagram, documentation, generator |

## Links

- npm: https://www.npmjs.com/package/readme-diagram
- npm.io page: https://npm.io/package/readme-diagram

## Dependencies (2)

- [marked](https://npm.io/package/marked.md) ^0.6.0
- [diagrams](https://npm.io/package/diagrams.md) ^0.10.0

## Alternatives

- [@cantoo/pdf-lib](https://npm.io/package/@cantoo/pdf-lib.md) — 297.9K weekly downloads
- [datatables.net-buttons](https://npm.io/package/datatables.net-buttons.md) — 200.1K weekly downloads
- [@ckeditor/ckeditor5-export-pdf](https://npm.io/package/@ckeditor/ckeditor5-export-pdf.md) — 167.0K weekly downloads
- [scanbot-web-sdk](https://npm.io/package/scanbot-web-sdk.md) — 15.0K weekly downloads
- [@syncfusion/ej2-angular-pdfviewer](https://npm.io/package/@syncfusion/ej2-angular-pdfviewer.md) — 8.8K weekly downloads

## Recent versions

- 1.0.3 (latest) — 2019-01-13
- 1.0.2 — 2019-01-13
- 1.0.1 — 2019-01-13
- 1.0.0 — 2019-01-13

## README

# readme diagrams generator

Generate diagrams in your readme files like this one:

![diagram](diagrams/jwt-sequence-diagram.svg)
<details><summary>raw</summary>

```js-sequence-diagram
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

```
</details>

## Install

```bash
npm install -g readme-diagram
```
Currently there is an [issue](https://github.com/electron-userland/electron-prebuilt/issues/263) 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:
```md
![Some text](relative/path/to/file.svg)
```

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

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

```html
<details><summary>raw</summary>
    ...
</details>
```

Run generator:

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

---
_Source: https://npm.io/package/readme-diagram · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._