TOAST UI Editor : UML Plugin

> This is a plugin of TOAST UI Editor to render UML.


!uml

🚩 Table of Contents

- Bundle File Structure
- Usage npm
- Usage CDN

📁 Bundle File Structure

$3

``
- node_modules/
- @toast-ui/
- editor-plugin-uml/
- dist/
- toastui-editor-plugin-uml.js
`

$3

The bundle files include all dependencies of this plugin.

`
- uicdn.toast.com/
- editor-plugin-uml/
- latest/
- toastui-editor-plugin-uml.js
- toastui-editor-plugin-uml.min.js
`

📦 Usage npm

To use the plugin, @toast-ui/editor must be installed.

> Ref. Getting Started

$3

`sh
$ npm install @toast-ui/editor-plugin-uml
`

$3

#### ES Modules

`js
import uml from '@toast-ui/editor-plugin-uml';
`

#### CommonJS

`js
const uml = require('@toast-ui/editor-plugin-uml');
`

$3

#### Basic

`js
import Editor from '@toast-ui/editor';
import uml from '@toast-ui/editor-plugin-uml';

const editor = new Editor({
// ...
plugins: [uml]
});
`

#### With Viewer

`js
import Viewer from '@toast-ui/editor/dist/toustui-editor-viewer';
import uml from '@toast-ui/editor-plugin-uml';

const viewer = new Viewer({
// ...
plugins: [uml]
});
`

or

`js
import Editor from '@toast-ui/editor';
import uml from '@toast-ui/editor-plugin-uml';

const viewer = Editor.factory({
// ...
plugins: [uml],
viewer: true
});
`

🗂 Usage CDN

To use the plugin, the CDN files(CSS, Script) of @toast-ui/editor must be included.

$3

`html
...

...




...

...
`

$3

#### Basic

`js
const { Editor } = toastui;
const { uml } = Editor.plugin;

const editor = new Editor({
// ...
plugins: [uml]
});
`

#### With Viewer

`js
const Viewer = toastui.Editor;
const { uml } = Viewer.plugin;

const viewer = new Viewer({
// ...
plugins: [uml]
});
`

or

`js
const { Editor } = toastui;
const { uml } = Editor.plugin;

const viewer = Editor.factory({
// ...
plugins: [uml],
viewer: true
});
`

$3

The uml plugin can set options when used. Just add the plugin function and options related to the plugin to the array([pluginFn, pluginOptions]) and push them to the plugins option of the editor.

The following option is available in the uml plugin.

| Name | Type | Default Value | Description |
| ------------- | -------- | ----------------------------------------- | ------------------------- |
| rendererURL | string | 'http://www.plantuml.com/plantuml/png/' | URL of plant uml renderer |

`js
// ...

import Editor from '@toast-ui/editor';
import uml from '@toast-ui/editor-plugin-uml';

const umlOptions = {
rendererURL: // ...
};

const editor = new Editor({
// ...
plugins: [[uml, umlOptions]]
});
``