monaco-plantuml

monaco editor extension for PlantUML with better intellisense

Online Demo

Installation

yarn add @sinm/monaco-plantuml

Usage

import { PUmlExtension } from '@sinm/monaco-plantuml';

const extension = new PUmlExtension();

const disposer = extension.active(editor);

// when destroyed
disposer.dispose();

Run with web worker

webpack 5

1. create puml.worker.ts file in current directory

// editor/puml.worker.ts
import '@sinm/monaco-plantuml/lib/puml.worker'

2. user worker in editor.ts file

// editor/editor.ts
import { PUmlExtension } from '@sinm/monaco-plantuml';
const worker = new Worker(new URL('./puml.worker.ts', import.meta.url));
const extension = new PUmlExtension(worker);

vite

import { PUmlExtension } from '@sinm/monaco-plantuml';
import PUmlWorker from '@sinm/monaco-plantuml/lib/puml.worker?worker';
// relative
const worker = new PUmlWorker();
const extension = new PUmlExtension(worker);