@toast-ui/editor-plugin-uml

TOAST UI Editor : UML Plugin

Usage no npm install needed!

<script type="module">
  import toastUiEditorPluginUml from 'https://cdn.skypack.dev/@toast-ui/editor-plugin-uml';
</script>

README

TOAST UI Editor : UML Plugin

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

npm version

uml

🚩 Table of Contents

📁 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]
});

or

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]
});

or

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]]
});