# Mermaid JS Plugin

**URL:** <https://meta.discourse.org/t/mermaid-js-plugin/88696>\
**Category:** Plugin\
**Created:** [5월 29, 2018, 9:24오후 UTC](https://meta.discourse.org/t/mermaid-js-plugin/88696 "2018-05-29T21:24:43Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![jag3773](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jag3773/32/162804_2.png) [@jag3773](https://meta.discourse.org/u/jag3773)\
**Post date:** [5월 29, 2018, 9:24오후 UTC](https://meta.discourse.org/t/mermaid-js-plugin/88696/1 "2018-05-29T21:24:43Z")

</div>

Repo: [GitHub - unfoldingWord/discourse-mermaid: Adds the Mermaid JS library to discourse · GitHub](https://github.com/unfoldingWord-dev/discourse-mermaid)

## Overview

This plugin adds the [Mermaid JS](https://mermaidjs.github.io/) library to Discourse so that posts can make use of its features. It turns this:

```plaintext
[mermaid]
gantt
    title A Gantt Diagram
    dateFormat YYYY-MM-DD
    section Section
    A task :a1, 2014-01-01, 30d
    Another task :after a1 , 20d
    section Another
    Task in sec :2014-01-12 , 12d
    another task : 24d
[/mermaid]

```

into this:

 ![55%20PM](https://global.discourse-cdn.com/meta/original/3X/d/c/dcdaaec5e5315fc4b4b264389d7302667b6d45bd.png)

See the [Mermaid JS](https://mermaidjs.github.io/) site for documentation and more examples.

## Installation

The installation notes are available at [GitHub - unfoldingWord/discourse-mermaid: Adds the Mermaid JS library to discourse · GitHub](https://github.com/unfoldingWord-dev/discourse-mermaid#installation) (in short, just add it to `app.yml`).

## Notes

Thanks to @j.jaffeux, version 0.0.3 of this plugin is much easier to install and the generated charts load reliably and immediately.

---

_[View the full topic](https://meta.discourse.org/t/mermaid-js-plugin/88696)._