wmap-renderer-svg

A browser only SVG renderer for wmap formatted wardley maps parsed with wmap-parser. Uses two.js.

If you need node.js support or raster images, see wmap-renderer-canvas

Features

• Renders to SVGs.
• Runs entirely in the browser.
• Rendering logic attempts to replicate map's output.

Installation

npm install wmap-renderer-svg

yarn add wmap-renderer-svg

pnpm add wmap-renderer-svg

Usage

Browser

import { parse } from "wmap-parser";
import { renderToCanvas } from "wmap-renderer-svg";

const wmapSource = `
Tea (0.9, 0.5)
Cup (0.8, 0.4)
Tea -> Cup
`;

const map = parse(wmapSource);
const canvas = document.getElementById("myCanvas");

await renderToCanvas(map, canvas);

Configuration

All functions accept an optional configuration object that can override how the map is rendered. See the type definitions for more info on each value. Here's all the defaults.

{
    options: {
        showBackground: true,
        smartLabelPositioning: true,
    },
    theme: {
        colors: {
            background: "#FFFFFF",
            axis: "#0F261F",
            vertex: "#0F261F",
            label: "#0F261F",
            stageForeground: "#DAE6E3",
            stageBackground: "#FFFFFF",
            inertia: "#FA2B00",
            evolution: "#4F8FE6",
            groups: [
                "#4F8FE6",
                "#FA2B00",
                "#23C17C",
                "#FAED8F",
                "#FFB3F0",
            ],
        },
        sizes: {
            mapWidth: 1300,
            mapHeight: 1000,
            padding: 42,
            lineWidth: 0.5,
            vertexWidth: 25,
            vertexHeight: 25,
            arrowheadSize: 10,
            stageHeight: 100,
        },
        fonts: {
            family: '"Helvetica Neue", Helvetica, Arial, sans-serif',
            axisLabel: 14,
            vertexLabel: 12,
            note: 12,
        },
        lineHeights: {
            vertexLabel: 18,
            note: 18,
        },
        opacity: {
            groups: 0.1,
        },
    },
}

API

renderToSVG(map, stageType, overrides)

Parameters:

• map (Map): Parsed map object from wmap-parser
• stageType (StageType): The type of stage to use. See StageType for all possible values. Defaults to StageType.ACTIVITIES
• overrides (tConfiguration, optional):

Returns: string - The SVG

Development

This project uses a Makefile to run all commands. This is to keep the commands uniform with the other wmap-parser projects.

Running Tests

make test

Or to see coverage

make coverage

Regenerating Types

If you change the JSDocs, you'll need to regenerate the types

make types