This page introduces maxGraph, a TypeScript-based graph visualization library. It covers the project's purpose, origins, key capabilities, and repository structure. For detailed architectural information, see Architecture Overview. For installation and first steps, see Getting Started.
maxGraph is a fully client-side JavaScript/TypeScript library for creating and rendering interactive graph diagrams using SVG and HTML. It provides two fundamental primitives:
The library focuses on diagramming applications that require programmatic control, automatic layout algorithms, and deep customization. It is suited for applications like flowchart editors, network diagrams, organization charts, and other graph-based visualizations.
Sources: README.md8-15 packages/core/README.md4-11
maxGraph is the maintained successor to mxGraph, which reached end-of-life on November 9, 2020. The project was forked on November 12, 2020, and renamed to maxGraph on June 2, 2021 to avoid licensing issues.
Starting from mxGraph 4.2.2, the maxGraph project has:
@maxgraph/core)The library maintains conceptual compatibility with mxGraph while modernizing the implementation and breaking API compatibility where necessary for improved design.
Sources: README.md176-200 CHANGELOG.md438-445
The maxGraph repository uses npm workspaces to organize multiple packages:
Package Purposes:
| Package | Purpose | Published |
|---|---|---|
@maxgraph/core | Core library distributed to users | Yes (npm) |
@maxgraph/html | Interactive Storybook demos | No (GitHub Pages) |
@maxgraph/website | Docusaurus documentation site | No (GitHub Pages) |
@maxgraph/ts-example | TypeScript + Vite integration example | No |
@maxgraph/ts-example-without-defaults | Minimal configuration example | No |
@maxgraph/ts-example-selected-features | Tree-shaking demonstration | No |
@maxgraph/js-example | JavaScript + Webpack integration | No |
@maxgraph/js-example-nodejs | Node.js headless usage | No |
@maxgraph/ts-example-jest-commonjs | CommonJS testing example | No |
Sources: package.json14-15 README.md137-156 packages/website/docs/demo-and-examples.md17-41
The @maxgraph/core package provides dual-format distribution to support both modern and legacy build systems:
Package Exports Configuration:
The packages/core/package.json21-37 defines conditional exports:
Sources: packages/core/package.json6-37 packages/core/scripts/generate-cjs-package-json.mjs1-30 README.md62-68
Current Status: maxGraph is actively developed and released under semantic versioning. As of version 0.22.0, the library is considered production-ready but has not yet reached 1.0.0.
Compatibility Requirements:
| Requirement | Version |
|---|---|
| JavaScript Output | ES2020 |
| TypeScript Support | ≥ 3.8 |
| Node.js (Development) | As specified in .nvmrc |
| Browsers | Chrome, Edge, Firefox, Safari, Chromium-based |
| Mobile Browsers | iOS Safari, Android Chrome |
The library version is stored in packages/core/src/util/Constants.ts as VERSION constant and synchronized across multiple files by scripts/update-versions.mjs during the release process.
Sources: README.md30-33 README.md62-68 packages/website/docs/getting-started.mdx40-45 packages/website/docs/development/release.md44
The Client class provides environment detection capabilities:
The packages/core/src/Client.ts36-213 provides static properties for runtime detection:
IS_EDGE, IS_NS, IS_SF, IS_GC, IS_FFIS_WIN, IS_MAC, IS_CHROMEOS, IS_ANDROID, IS_IOSIS_TOUCH, IS_POINTER, IS_SVG, NO_FObasePath, imageBasePath for resource loadingSources: packages/core/src/Client.ts1-216
maxGraph provides functionality across multiple domains:
Key Feature Areas:
| Area | Key Classes/Modules | Purpose |
|---|---|---|
| Graph Management | Graph, AbstractGraph, BaseGraph | Main API, graph operations |
| Data Model | GraphDataModel, Cell, Geometry | Cell storage, transactions, structure |
| Visual State | GraphView, CellState, CellStateStyle | Visual state caching, validation |
| Rendering | CellRenderer, SvgCanvas2D, Shape classes | SVG generation, DOM management |
| Interaction | Plugin system, Handler classes | Editing, connections, selection, tooltips |
| Styling | Stylesheet, CellStyle types | Visual appearance configuration |
| Layout | Layout algorithm classes | Automatic graph arrangement |
| Serialization | Codec system, ModelXmlSerializer | XML import/export |
Sources: High-level diagrams (Diagram 2), README.md8-15
Project Maturity: maxGraph is under active development. The core functionality is stable and production-ready, with ongoing enhancements and new features being added.
Release Cadence: The project follows semantic versioning with regular releases documented in CHANGELOG.md Recent releases have focused on:
Breaking Changes: Until version 1.0.0, minor releases may include breaking changes as the API is refined. All breaking changes are documented in CHANGELOG.md1-445
Sources: CHANGELOG.md1-50 README.md34-39 packages/website/docs/development/release.md1-114
For further information, see:
Sources: README.md128-173 packages/website/docs/demo-and-examples.md1-43 CONTRIBUTING.md1-335
Refresh this wiki
This wiki was recently refreshed. Please wait 2 days to refresh again.