@miragon/wardley-renderer

diagram-js-based renderer for Wardley Maps: Viewer, NavigatedViewer, and a full editable Modeler, plus OWM / JSON / SVG / PNG import and export. Browser/DOM only.

Install

npm install @miragon/wardley-renderer

Usage

import { NavigatedViewer } from '@miragon/wardley-renderer';
import '@miragon/wardley-renderer/assets/wardley.css';

const viewer = new NavigatedViewer({ container: document.querySelector('#canvas')! });

await viewer.importDSL(`title Tea Shop
anchor Business [0.95, 0.63]
component Kettle [0.43, 0.35]
evolve Kettle 0.62
Business -> Kettle`);

const map = viewer.exportMap(); // canonical JSON model
const dsl = viewer.exportDSL(); // back to OWM text
const { svg } = await viewer.saveSVG();

Swap NavigatedViewer for Modeler to get the editable map (palette, context pad, undo/redo).

Fonts

The package ships no fonts and uses no CDN. The canvas typeface is Geist (Miragon corporate identity); provide it yourself — recommended self-hosted via @fontsource (one variable file covers all weights):

import '@fontsource-variable/geist/wght.css';

Part of the Wardley Maps monorepo.

License

MIT