Introduction

Psiagram (/ˈ(p)saɪɑˌɡræm/) - a simple, feature-rich, and extensible diagram framework for JavaScript. It provides the foundation to build anything from simple workflows to complex interactive graphs with vast shape libraries.

CodeSandbox Demo

Simple

Psiagram is a dependency-free framework, allowing easy integration in any front end, regardless of the technology stack. It wraps all complex DOM manipulation, which makes manipulating your diagrams as easy as setting properties.

To start creating using Psiagram, see the basics section.

Feature-rich

Psiagram provides robust events for every action to allow total control over the framework, enabling you to intercept and alter any updates to the Paper. At its core, it provides high-performance rendering of SVG diagram components, and an extensive but simple API to interact with the diagram.

For an in-depth look into some features, see the in-depth section.

Extensible

Psiagram is set up to allow easy extensibility through plugins. These vary from providing a grid pattern background, to providing complex drag-n-drop functionality and event firing.

Check out some of the official plugins in the plugins section.