typedoc-plugin-mermaid's Introduction

typedoc-plugin-mermaid

A plugin for TypeDoc that generates graphs for mermaid.js diagrams by @mermaid annotation.

Installation

The plugin can then be installed using npm:

# npm
npm install --save-dev typedoc-plugin-mermaid
# or yarn
yarn add -D typedoc-plugin-mermaid

Add this plugin in your typedoc.json:

{
  "plugin": ["typedoc-plugin-mermaid"]
}

If you use the @mermaid tag in your tsdoc comments, add typedoc-plugin-mermaid/tsdoc.json to the extends of tsdoc.json:

{
  "$schema": "https://developer.microsoft.com/json-schemas/tsdoc/v0/tsdoc.schema.json",
  "extends": [
    "typedoc-plugin-mermaid/tsdoc.json"
  ]
}

Usage

Write tsdoc with @mermaid annotations:

/**
 * Hoge is sample class for example of `typedoc-plugin-mermaid`.
 *
 * @mermaid Make TypeDoc easy to use with mermaid.js
 * graph TB
 *   mermaid.js --> TypeDoc;
 */
export class Hoge { }

Or use fenced code blocks:

/**
 * Mermaid code blocks are automatically detect and converted.
 *
 * ```mermaid
 * graph TB
 *   mermaid.js --> TypeDoc;
 * ```
 */
export class Mermaid { }

↓↓ DEMO ↓↓

Arguments

The following arguments can be used in addition to the default TypeDoc arguments.

$ typedoc --help
...
Options:
 --mermaidVersion            [Mermaid Plugin] The version of mermaid.js to use.
...

--mermaidVersion

Specify mermaid.js version to use.

Default: latest, Example: 8.14.0

Contributors

Thanks goes to these wonderful people (emoji key):

_{Yuki Yamazaki} 🤔 💻 ⚠️ 📖	_{Bob Kerns} 🐛 💻	_{Emily Marigold Klassen} 💻 ⚠️	_{Mathieu Jalbert-Claveau} 🐛	_{Michael Schmidt} 💻 ⚠️ 📖	_{Carl Fürstenberg} 🐛 🚇	_{Will Henderson} 💻 🐛 💡
_guryanovev 🐛	_{Ricardo Ferreira} 🤔	_{Maneet Goyal} 🤔	_{Juergen Zimmermann} 🐛	_{Michal Kindl} ️️️️♿️	_{Ludovic Muller} ️️️️♿️