Skip to main content

CSS and Images

CSS​

Some features of maxGraph create elements in the DOM to let interact with the Graph.

For example, it happens when using Editor, MaxPopupMenu, MaxWindow, Rubberband, Toolbar or Tooltip.

These elements require the application to provide CSS rules for correct display.

maxGraph provides a default CSS file that can be used in the application like in the following:

import '@maxgraph/core/css/common.css';

Customizing CSS​

It is possible to customize the defaults by providing new CSS rules.

For example, create a custom.css file:

/* For rubber band selection, override maxGraph defaults */
div.mxRubberband {
  border-color: #b18426;
  background: #db9b0b;
}

Then, import it in the application:

import '@maxgraph/core/css/common.css';
import './custom.css'
tip

You can see this technique in action in the TypeScript example provided in the maxGraph repository.

Configuring your build tool to import CSS files​

When using a build tool or bundler, additional configuration is often required to import CSS files into the application code (i.e. to make the CSS import work in the examples of the previous paragraph). Some manage this automatically, like Vite, others require specific plugins. See the documentation of your build tool or framework for more information.

For example, with Webpack, you can use the style-loader and css-loader plugins. For more details, see:

You can also check the JavaScript Webpack example provided in the maxGraph repository.

Images​

The @maxgraph/core npm package includes images that are required by some features.
For example, the Folding feature requires (if not configured elsewhere) images named collapsed.gif and expanded.gif.

When using these features, the images must be available to the application.

Currently, you must copy the images provided by maxGraph or provide your own images.
This is what is done in the Storybook demo.

The path to the images must be configured using Client.setImageBasePath if the default settings do not work with your application.

note

This configuration is inherited from mxGraph and may be simplified in the future.