Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 28 additions & 20 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,33 @@
[![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/maxGraph/maxGraph)

<!-- copied into packages/core/README.md and packages/website/docs/intro.md -->
`maxGraph` is a TypeScript library which can display and allow interaction with vector diagrams. At a high level, it provides:
- **Nodes**, also known as **vertices** which are typically represented by shapes like rectangles.
- **Edges** which can be lines and arrows which normally point between one node and another.

It provides many of the diagramming features which would be expected by a piece of presentation software like Microsoft® PowerPoint™
or LibreOffice® Impress such as being able to resize, move or rotate nodes, but has a stronger focus on automatic layout
algorithms and applications of [Graph Theory](https://en.wikipedia.org/wiki/Graph_theory). It is suited towards software
which requires finer-grained customization of functionality than off-the-shelf packages.
`maxGraph` is a TypeScript library for building interactive diagram applications. At its core, it manages:
- **Vertices** — Nodes displayed as shapes (rectangles, ellipses, custom designs)
- **Edges** — Connections between vertices (lines, arrows, custom paths)

Beyond basic diagram editing (resize, move, rotate), `maxGraph` provides automatic layout algorithms, graph theory operations, and deep API-level control.
It's designed for developers building custom diagramming tools — flowchart editors, data lineage visualizers, network maps, process designers — where off-the-shelf solutions lack the flexibility or programmability you need.

`maxGraph` continues the legacy of [mxGraph](https://github.com/jgraph/mxgraph) (archived in 2020) as its actively maintained successor.
It preserves mxGraph's comprehensive features and XML compatibility while modernizing with native TypeScript, modular architecture, and smaller bundle sizes.
Active development ensures continuous bug fixes and new capabilities.
<!-- END OF 'copied into packages/core/README.md and packages/website/docs/intro.md' -->


The `maxGraph` library uses no third-party software, it requires no plugins and can be integrated in virtually any framework (it's vanilla JS).
## Features

`maxGraph` is the successor of [mxGraph](https://github.com/jgraph/mxgraph) which is now end of life.
At first, it provides the same features as `mxGraph` and adds
- TypeScript support
- maintained npm package
- modern modular, tree shakable, version of `mxGraph` to reduce the whole package size
- 🎨 **Rich visual library** — Built-in shapes, custom stencils, and various edge routing algorithms (orthogonal, Manhattan, elbow, etc.)
- 🔀 **Automatic layouts** — Hierarchical, tree, circle, organic, and swimlane layouts for organized diagrams
- 🖱️ **Interactive editing** — Move, resize, rotate, connect, and edit cells with mouse and keyboard
- 📂 **Hierarchical grouping** — Organize elements with groups, collapse/expand, and drill-down navigation
- ↩️ **Undo/redo** — Full history tracking for all operations
- 💾 **XML import/export** — Compatible with mxGraph format for data persistence
- 🎯 **Event system** — React to any graph change (clicks, moves, adds, removes, style changes)
- 🛠️ **Native TypeScript** — Complete type definitions, zero dependencies, tree-shakable architecture
- 🔌 **Framework-agnostic** — Works with React, Vue, Angular, or vanilla JavaScript
- ⚙️ **Highly customizable** — 100+ style properties per cell, custom shapes, and plugin architecture

New features will follow.
[📚 View full feature list](https://maxgraph.github.io/maxGraph/docs/intro#features)


## Browser support
Expand Down Expand Up @@ -192,11 +199,12 @@ On 2020-11-12, a fork of the `mxGraph` was created with a call to Contributors.

The project was then [renamed on 2021-06-02](https://github.com/maxGraph/maxGraph/discussions/47) into `maxGraph` due to [licensing issue](https://github.com/maxGraph/maxGraph/discussions/23).

Starting from the `mxGraph` 4.2.2 release, we
- moved code to ES9
- removed Internet Explorer specific code
- migrated to TypeScript, based on the work initiated in [typed-mxgraph](https://github.com/typed-mxgraph/typed-mxgraph)
- migrated the examples to [Storybook](https://storybook.js.org/)
Starting from the `mxGraph` 4.2.2 release, the project has:
- Moved the codebase to ES2018 and removed Internet Explorer support
- Migrated to TypeScript, building on the work initiated in [typed-mxgraph](https://github.com/typed-mxgraph/typed-mxgraph)
- Migrated the examples to [Storybook](https://storybook.js.org/)
- Introduced tree-shaking with the `BaseGraph` and plugin architecture
- Added new features, improved documentation, and expanded examples


## Development
Expand Down
18 changes: 10 additions & 8 deletions packages/core/README.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
# @maxgraph/core

<!-- extract of ../../README.md -->
`maxGraph` is a TypeScript library which can display and allow interaction with vector diagrams. At a high level, it provides:
- **Nodes**, also known as **vertices** which are typically represented by shapes like rectangles.
- **Edges** which can be lines and arrows which normally point between one node and another.

It provides many of the diagramming features which would be expected by a piece of presentation software like Microsoft® PowerPoint™
or LibreOffice® Impress such as being able to resize, move or rotate nodes, but has a stronger focus on automatic layout
algorithms and applications of [Graph Theory](https://en.wikipedia.org/wiki/Graph_theory). It is suited towards software
which requires finer-grained customization of functionality than off-the-shelf packages.
`maxGraph` is a TypeScript library for building interactive diagram applications. At its core, it manages:
- **Vertices** — Nodes displayed as shapes (rectangles, ellipses, custom designs)
- **Edges** — Connections between vertices (lines, arrows, custom paths)

Beyond basic diagram editing (resize, move, rotate), `maxGraph` provides automatic layout algorithms, graph theory operations, and deep API-level control.
It's designed for developers building custom diagramming tools — flowchart editors, data lineage visualizers, network maps, process designers — where off-the-shelf solutions lack the flexibility or programmability you need.

`maxGraph` continues the legacy of [mxGraph](https://github.com/jgraph/mxgraph) (archived in 2020) as its actively maintained successor.
It preserves mxGraph's comprehensive features and XML compatibility while modernizing with native TypeScript, modular architecture, and smaller bundle sizes.
Active development ensures continuous bug fixes and new capabilities.
<!-- END OF 'extract of ../../README.md' -->


Expand Down
84 changes: 77 additions & 7 deletions packages/website/docs/intro.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,87 @@ sidebar_position: 1
# Introduction

[//]: # (extract of <rootdir>/README.md)
`maxGraph` is a TypeScript library which can display and allow interaction with vector diagrams. At a high level, it provides:
- **Nodes**, also known as **vertices** which are typically represented by shapes like rectangles.
- **Edges** which can be lines and arrows which normally point between one node and another.
`maxGraph` is a TypeScript library for building interactive diagram applications. At its core, it manages:
- **Vertices** — Nodes displayed as shapes (rectangles, ellipses, custom designs)
- **Edges** — Connections between vertices (lines, arrows, custom paths)

It provides many of the diagramming features which would be expected by a piece of presentation software like Microsoft® PowerPoint™
or LibreOffice® Impress such as being able to resize, move or rotate nodes, but has a stronger focus on automatic layout
algorithms and applications of [Graph Theory](https://en.wikipedia.org/wiki/Graph_theory). It is suited towards software
which requires finer-grained customization of functionality than off-the-shelf packages.
Beyond basic diagram editing (resize, move, rotate), `maxGraph` provides automatic layout algorithms, graph theory operations, and deep API-level control.
It's designed for developers building custom diagramming tools — flowchart editors, data lineage visualizers, network maps, process designers — where off-the-shelf solutions lack the flexibility or programmability you need.

`maxGraph` continues the legacy of [mxGraph](https://github.com/jgraph/mxgraph) (archived in 2020) as its actively maintained successor.
It preserves mxGraph's comprehensive features and XML compatibility while modernizing with native TypeScript, modular architecture, and smaller bundle sizes.
Active development ensures continuous bug fixes and new capabilities.

[//]: # (END OF 'extract of <rootdir>/README.md')


## Features

### Core Architecture
- **Graph Model**: Manages the structure with three primary elements: vertices (nodes), edges (connections), and groups (sub-graphs)
- **Vertices**: Individual nodes that can contain labels, data, and visual properties. Each vertex can be styled independently
- **Edges**: Flexible connections that can link two vertices, one vertex (dangling edges), or exist standalone
- **Groups**: Hierarchical organization with parent-child relationships, enabling collapse/expand, nested structures, and collective operations

### Drawing and Display
- Built-in shapes: rectangles, ellipses, rhombuses, cylinders, clouds, triangles, hexagons, actors, swimlanes, and more
- Edge types: connectors, arrows, polylines with several marker styles (classic, block, open, oval, diamond, and variants)
- Various edge routing algorithms: orthogonal, Manhattan, elbow, entity-relation, segment, loop, and more
- Custom shapes through the stencil system (XML-defined shapes)
- Labels, tooltips, overlays (badges/icons on cells), and image support
- SVG rendering

### Interaction
- Move, resize, and rotate cells
- In-place label editing
- Create connections by dragging between cells
- Rubberband (box) selection and multi-selection
- Panning and zooming (zoom in, zoom out, fit-to-page)
- Keyboard shortcuts
- Drag and drop from external sources
- Context menus and tooltips
- Snap to grid and alignment guides
- Undo and redo for all operations

### Automatic Layouts
- Hierarchical layout (Sugiyama-style, suited for flowcharts and org charts)
- Compact tree and radial tree layouts
- Circle layout
- Organic layout (force-directed)
- Stack layout (horizontal or vertical)
- Swimlane layout
- Parallel edge layout
- Composite layout (combine several layouts)

### Organization and Structure
- **Hierarchical grouping**: Parent-child relationships for organizing related elements (like folders in a file system)
- **Collapse/expand**: Folding and unfolding of groups to manage diagram complexity
- **Drill-down navigation**: Navigate into groups to focus on sub-graphs
- **Layers and visibility**: Control which elements are visible or hidden
- **Swimlanes**: Visual separation for business process diagrams and workflows
- **Connection validation**: Multiplicity rules to enforce valid connections between cell types
- **Ports**: Precise connection points on vertices for controlled edge attachment
- **Z-order management**: Control stacking order (bring to front, send to back)
- **Page breaks**: Visualization for multi-page printing

### Data and Serialization
- **XML import/export**: Compatible with `mxGraph` format for data persistence and interoperability
- **Batch updates**: Efficient model changes with `batchUpdate()` to group multiple operations
- **Event system**: React to any graph change (clicks, moves, adds, removes, style changes, etc.)
- **Undo/redo**: Full history tracking for all operations with UndoManager

### Developer Experience
- Written in TypeScript with complete type definitions. TypeScript integration requires **TypeScript 3.8** or higher
- Zero third-party dependencies
- Tree-shakable: use `BaseGraph` to import only what you need and reduce bundle size
- Available as both ES Module and CommonJS. The JavaScript code conforms to the `ES2020` standard
- Plugin architecture: add only the interaction handlers you need
- Style system with 100+ configurable properties per cell
- Internationalization (i18n) support
- Works with any framework (vanilla JS, React, Angular, Vue, etc.)
- CSS and image assets included in the npm package


## About this documentation

:::tip
Expand Down