Demos and Examples

tip

The documentation does not cover all the features available in maxGraph. However, maxGraph does provide numerous examples. These examples show how to use the features and how maxGraph can be extended to meet new needs.

This page includes links to the examples and demos available in the maxGraph repository.

For more comprehensive examples than the “Getting started” example, this page provides a list of demos and examples to help you understand how to use maxGraph and integrate it into your projects.

Note that they are based on maxGraph features, which require the use of CSS and images provided in the npm package.

Interactive Demos

• the storybook stories demonstrates various features of maxGraph.
  • The stories are currently written in JavaScript and will be progressively migrated to TypeScript.
  • A live instance is available on the maxGraph website.

TypeScript Examples

• the ts-example project/application demonstrates how to define and use custom Shapes with maxGraph. It is a vanilla TypeScript application built by Vite.
• the ts-example-without-defaults project/application demonstrates how to not use defaults plugins and style defaults (shapes, perimeters, ...). It is a vanilla TypeScript application built by Vite.

JavaScript Examples

• the js-example project/application demonstrates how to import and export the maxGraph model with XML data. It is a vanilla JavaScript application built by Webpack.
• the js-example-without-defaults project/application demonstrates how to not use defaults plugins and style defaults (shapes, perimeters, ...). It is a vanilla JavaScript application built by Webpack.

Framework Integration and Bundlers

• the maxgraph-integration-examples repository which shows how to integrate maxGraph with different frameworks and build tools.