@creately/rdm-editor

The rich interactive Creately canvas for embedding RDM diagrams in any web app. Same engine as creately.com, distributed as a compiled bundle.

Quick start (script tag)

<div id="canvas" style="width:100vw;height:100vh;"></div>
<script src="https://cdn.jsdelivr.net/npm/@creately/rdm-editor@latest/rdm-editor.iife.js"></script>
<script>
  const instance = window.CreatelyEditor.mount('#canvas', {
    rdmText: `@type flowchart
start s "Start"
task t "Do work"
end e "Done"
s -> t
t -> e`,
    mode: 'interactive',
    onRdmChange: (text) => console.log('updated:', text),
  });
</script>

Quick start (npm)

npm install @creately/rdm-editor @creately/rdm-core

import { mount } from '@creately/rdm-editor';

const instance = mount('#canvas', {
  rdmText: '...',
  mode: 'interactive',
});

Licensing

This software is provided free for use under the Creately Viewer License. The default configuration displays a "Made with Creately" attribution. To hide the attribution, obtain an API key via https://creately.com/rdm-editor/keys.

Looking for an MIT-licensed, fork-friendly viewer?

For a minimal, MIT-licensed SVG viewer with basic rendering and pan/zoom, see @creately/rdm-viewer. It is smaller (~250KB), simpler, and open source. Use that if you want to embed a diagram renderer in your own app without the full Creately canvas experience.

For the full interactive editing experience with all Creately canvas features — this package.