Getting Started
This guide provides a step-by-step walkthrough of setting up and using the diagram library. It is divided into five main parts.
Learn the different ways to include the diagramming library in your project. This section covers loading via simple <script> tags, using modern ES modules with import maps, and integrating it as an npm package for bundled applications.
Discover how to add the diagram component to your web page. This part explains the two main approaches: using a manual <canvas> element for direct control, or using the modern Web Components standard for better encapsulation.
3. Working with the JavaScript Diagram Model
Dive into the core objects that control your diagram's content and behavior. This section introduces the fundamental Diagram (the data model) and DiagramView (the visual control) classes and shows you how to create a diagram instance and add items to it.
4. TypeScript and Code Completion
Enable code completion in your editor and import the Diagramming API to use along with TypeScript compiler. This guide explains how to use the provided TypeScript declaration (.d.ts) files for real-time code suggestions and type-checking.
Get a head start by cloning a pre-configured project from GitHub. This section provides links to repositories for vanilla JavaScript, npm/bundler setups, Electron, and popular frameworks like React, Angular, and Vue.