@creately/rdm-viewer

Interactive canvas viewer for Rich Diagram Markup (RDM) — the visual layer that turns any .rdm file into a live, editable diagram.

Status: 0.1.0 — read-only. This release parses RDM text and renders it to SVG via @creately/rdm-core. Zero React/Konva dependencies, works anywhere DOM is available. Full interactive editing lands in 0.2.0.

Install

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

Or via CDN (IIFE bundle, when released):

<script src="https://cdn.jsdelivr.net/npm/@creately/rdm-viewer/dist/rdm-viewer.iife.js"></script>

Quick Start

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

const viewer = mount('#diagram', {
  rdmText: `---
type: flowchart
title: "Hello"
---

flowchart Hello {
  start s1 "Start"
  task t1 "Do work"
  end e1 "End"

  s1 -> t1
  t1 -> e1
}`,
});

// Later...
viewer.updateRdm(newRdmText);
const svg = viewer.exportSvg();

For <script> tag embeds, the IIFE bundle exposes window.CreatelyRdm.mount:

<div id="diagram" style="width:800px;height:600px;"></div>
<script>
  const viewer = window.CreatelyRdm.mount('#diagram', {
    rdmText: document.querySelector('#rdm-source').textContent,
  });
</script>

API

mount(container, options): ViewerInstance

| Option | Type | Description | |---|---|---| | rdmText | string | Initial RDM source. Can also be set later via instance.updateRdm(). | | theme | 'light' \| 'dark' \| 'auto' | Visual theme. Defaults to 'auto'. (v0.2.0) | | editable | boolean | Enables editing with write-back via callbacks. (v0.2.0) | | onRdmChange | (text: string) => void | Fires when the RDM source changes after an edit. | | onPatch | (op: PatchOperation) => void | Low-level: fires for each discrete patch operation. (v0.2.0) | | onNodeSelect | (id, data) => void | Fires on node selection or deselection. (v0.2.0) | | connectionStatus | 'connected' \| 'disconnected' \| 'connecting' | Optional host-sync indicator. (v0.2.0) | | branding | 'corner' \| 'hidden' | 'corner' shows a subtle Creately link. 'hidden' requires apiKey. | | apiKey | string | Required when branding: 'hidden'. |

ViewerInstance

interface ViewerInstance {
  updateRdm(rdmText: string): void;
  exportRdm(): string;
  exportSvg(): string | null;
  fitToContent(): void;
  setConnectionStatus(status): void;
  destroy(): void;
}

Version Roadmap

• 0.1.0 (now) — Read-only SVG rendering. Parse RDM → renderToSvg() → DOM. Zero-dep.
• 0.2.0 — React-based interactive viewer: editing, property panel, context menu, keyboard shortcuts, playback/story mode.
• 0.3.0 — Collaborative mode (Yjs integration, presence).

License

MIT © Cinergix Pty Ltd (Creately)