Papirus

TypeScript library for building interactive 2D diagrams and flowcharts on HTML Canvas. Supports nodes, edges, groups, styling, serialization, export, and interactivity.

Русская версия

About

Papirus is a diagram rendering and interaction engine designed to be embedded in any UI (SPA, static pages, design systems). The library provides:

• DiagramRenderer
  with coordinate system, zoom, and panning
• Set of elements (nodes/edges/groups) and base types
• Interaction managers (selection, drag, connection, history)
• Context menu and search/filtering
• Basic animations and animated edge flow
• Theming and styling via
  StyleManager
• Overlays (grid, minimap, rulers, guides) and export utilities

Installation

Requirements

• Node.js
  >=18
• A modern browser with Canvas API support (Chrome, Edge, Firefox, Safari)

Quick Start

Documentation

• Docs Index
• API Overview
• Elements
• Interactions
• Overlays
• Utils
• Changelog
• Security Policy

Features

Interactivity

Built-in

includes:

• drag/select/connect/undo/redo/copy/paste
• Pan on empty canvas area
• Zoom with mouse wheel, pinch-to-zoom, two-finger pan
• Smart alignment to other nodes while dragging (with guide lines)

Default edge creation: drag from one node anchor point to another (no modifier key required).

Default keyboard shortcuts:

• Delete/Backspace
  — delete selection
• Ctrl/Cmd + C
  /
  Ctrl/Cmd + V
  — copy/paste
• Ctrl/Cmd + Z
  — undo
• Ctrl/Cmd + Y
  or
  Ctrl/Cmd + Shift + Z
  — redo

Editable polyline edges:

• type: 'editable-polyline'
  supports draggable bend points.
• Mid-segment
  +
  controls add new bend points.
• Double-click a bend point to remove it.
• Bend points support grid snapping and axis magnet behavior while dragging.

Elements & Groups

Content Layout and Edge Label Background

Node layout is built in two steps:

• contentInset
  defines node content area (inside shape bounds).
• label.inset
  defines text inset inside content area.

Icon and text share the same content area:

• icon position is controlled by
  icon.placement
  +
  icon.inset
  ;
• text alignment is controlled by
  label.style.align
  and
  label.style.verticalAlign
  .

Edge labels support background styling through

:

CompositeNode (Flex Components)

lets you build notation-specific visual structures as a component tree (

container

,

text

,

icon

,

shape

,

divider

) with a flexbox-like layout engine:

Serialized composite components (

) include editor/integration fields:

• label
  — human-readable component caption for host editors.
• bindToProperty
  — bind
  text
  value to a property name (
  '__name__'
  for node display name).
• bindsNotationIcon
  — mark
  icon
  source as notation-level icon binding.

Styling

applies themes and classes to nodes/edges/text/ports/groups.

Built-in themes:

,

DARK_THEME

.

Serialization

Export

Overlays

Also available:

,

GuidesOverlay

,

AutoLayout

,

AutoRouting

,

alignNodes

,

distributeNodes

.

Framework Integrations

Papirus is framework-agnostic. It can be embedded in Vue/React/Svelte/vanilla apps.

Example

See

for interactive local demos.

Versioning and Stability

Papirus follows Semantic Versioning.
Current major version is

, so some API changes are still possible between minor releases.

Breaking and notable changes are documented in CHANGELOG.md.

Development

Useful commands:

Contributing

Please read CONTRIBUTING.md for details on our code of conduct and the process for submitting pull requests.

Key governance and contribution files:

• CONTRIBUTING.md / CONTRIBUTING.ru.md
• SECURITY.md / SECURITY.ru.md
• CODE_OF_CONDUCT.md / CODE_OF_CONDUCT.ru.md

License

This project uses dual licensing:

• AGPL-3.0-or-later
  for open-source usage
• Commercial license for proprietary/closed-source commercial usage

See:

• LICENSE
• LICENSE_COMMERCIAL.md