Package Exports

@toast-ui/editor-plugin-uml

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@toast-ui/editor-plugin-uml) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

TOAST UI Editor : UML Plugin

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

uml

📁 Bundle File Structure

Files Distributed on npm

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

Files Distributed on CDN

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

Install

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

Import Plugin

ES Modules

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

CommonJS

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

Create Instance

Basic

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

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

With Viewer

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

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

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.

Include Files

...
<body>
  ...
  <!-- Editor -->
  <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
  <!-- Editor's Plugin -->
  <script src="https://uicdn.toast.com/editor-plugin-uml/latest/toastui-editor-plugin-uml.min.js"></script>
  ...
</body>
...

Create Instance

Basic

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

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

With Viewer

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

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

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

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

[Optional] Use Plugin with Options

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

// ...

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

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

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