Miss any of our Open RFC calls?Watch the recordings here! »

markdown-it-textual-uml

0.1.3 • Public • Published

markdown-it-textual-uml

  1. Overview
    1. Metadata
    2. Continuous Integration
  2. UML examples
    1. PlantUML
    2. DOT
    3. ditaa
    4. mermaid
  3. Installation
  4. Usage
    1. Additional steps for mermaid
  5. Development
  6. References
  7. License

Overview

This is a markdown-it markdown parser plugin to create uml diagrams from text, based on plantuml, mermaid, etc.

At this point the following textual uml offerings are supported:

UML Offering Markdown fence identifier
PlantUML plantuml
DOT dot
ditaa ditaa
mermaid mermaid

Metadata

Provider Data Status
npm Version npm
npm License NPM
npm Downloads npm
BundlePhobia Bundle size npm bundle size
GitHub Version (package.json) GitHub package.json version
GitHub Repo Size GitHub repo size
GitHub Code Size GitHub code size in bytes
GitHub Commit Activity GitHub commit activity
GitHub Last Commit GitHub last commit (branch)
GitHub Open Issues GitHub issues
GitHub Closed Issues GitHub issues
GitHub Language Count GitHub language count
GitHub License GitHub
david-dm Check node.js dependency status David (path)
david-dm Check node.js dev dependency status David (path)

Continuous Integration

Platform Provider Operations Status

UML examples

PlantUML

```plantuml
Bob -> Alice : hello
```

DOT

```dot
digraph example1 {
    1 -> 2 -> { 4, 5 };
    1 -> 3 -> { 6, 7 };
}
```

ditaa

```ditaa
+--------+   +-------+    +-------+
|        +---+ ditaa +--> |       |
|  Text  |   +-------+    |diagram|
|Document|   |!magic!|    |       |
|     {d}|   |       |    |       |
+---+----+   +-------+    +-------+
    :                         ^
    |       Lots of work      |
    +-------------------------+
```

mermaid

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

Installation

node.js, browser:

npm install markdown-it-textual-uml --save

Usage

const md = require('markdown-it')()
           .use(require('markdown-it-textual-uml'));

Or,

import 'markdownItTextualUml from 'markdown-it-textual-uml'
const md = require('markdown-it')()
           .use(markdownItTextualUml);

Additional steps for mermaid

For mermaid, you have to include the mermaid js file in your application and initialize it after the window has loaded. Just using this plugin is not enough to ensure that the diagram is rendered correctly.

Note: mermaid js has a dependency on the browser window being loaded before it can initialize. Related GitHub issue.

So you should have the following in your html page in order for the mermaid text definitions to be translated into svg.

<script src="mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script> 

Details here.

When using some sort of framework, be aware that mermaid.initialize would have to be called after the page has loaded. For example, with vue.js, this could look like:

<script>
let mermaid = null
export default {
    mounted() {
        if (mermaid == null) {
        mermaid = require('mermaid')
        }
        mermaid.initialize({
        startOnLoad: true,
        theme: 'forest'
        })
    }
}
</script>

Development

It is highly recommended to use VS Code.

I have an open issue to make development, testing and deployments easier but for now following steps have to be followed:

  1. Make changes in this project.
  2. Update version in package.json.
  3. npm run build
  4. npm run pack
  5. In a separate test project that includes this npm package:
    1. Change the entry in its package.json to: "markdown-it-textual-uml": "file:./markdown-it-textual-uml-0.1.3.tgz". Change 0.1.3 to version from step 2.
    2. Run npm cache clean --force.
    3. Delete its package-lock.json.
    4. Delete folder for markdown-it-textual-uml from within the node_modules folder.
    5. Run npm install.

Once we have the changes tested out, revert back all changes in the test project.

Now, in this project, run npm publish. Then tag the develop branch. Then merge develop to master. Then create a GitHub release at the tag.

References

Here are some alternative npm packages:

License

MIT

Install

npm i markdown-it-textual-uml

DownloadsWeekly Downloads

186

Version

0.1.3

License

MIT

Unpacked Size

90.7 kB

Total Files

35

Last publish

Collaborators

  • avatar