MJS Diagram Demos

Customized MJS Diagram UI demo

You can customize MJS Diagram Viewer and Editor UIs using CSS variables.

Check the UI customization documentation for details.

Diagram Viewer

Code

Here is the CSS to achieve this:

mjs-diagram-viewer.customized-viewer-ui {
  border: 3px solid #cffafe;

  /* background color of the canvas behind and around the diagram document */
  --mjsdiav-canvas-background-color: #ecfeff;
  /* CSS filter to be added to the canvas for effects like drop shadow */
  --mjsdiav-canvas-filter: drop-shadow(4px 4px 10px #a5f3fc);
  /* background color for the zooming controls toolbar */
  --mjsdiav-tb-background-color: #a5f3fc;
  /* border color for the zooming controls toolbar */
  --mjsdiav-tb-border-color: #cffafe;
  /* fore color for the zooming controls toolbar */
  --mjsdiav-tb-fore-color: #155e75;
  /* toolbar button border color */
  --mjsdiav-tb-button-border-color: #a5f3fc;
  /* toolbar button background color on hover */
  --mjsdiav-tb-background-color-hover: #a5f3fc;
  /* toolbar button border color on hover */
  --mjsdiav-tb-button-border-color-hover: #cffafe;
}

Diagram Editor

Code

And here's the CSS for the Editor:

mjs-diagram-editor.customized-editor-ui {
  border: 3px solid #cffafe;

  /* toolbar button and text color */
  --mjsdiae-fore-color: #06b6d4;
  /* accent color used for highlighting active elements */
  --mjsdiae-accent-color: #06b6d4;
  /* used for new item thumbnail fills */
  --mjsdiae-accent-color2: #fef08a;
  /* toolbar and toolbox background color */
  --mjsdiae-background-color: #faffff;
  /* toolbar button background on hover */
  --mjsdiae-background-color-hover: #ecfeff;
  /* toolbar button border color */
  --mjsdiae-border-color: #faffff;
  /* toolbar button border color on hover */
  --mjsdiae-border-color-hover: #cffafe;
  /* border color for panels (toolbar, properties panel) */
  --mjsdiae-panel-border-color: #cffafe;
  /* separator color for panels in the property panel */
  --mjsdiae-panel-separator-color: #ecfeff;
  /* background color for inputs */
  --mjsdiae-input-background-color: white;
  /* background color for inputs in focus */
  --mjsdiae-input-background-color-focus: #ecfeff;
  /* input text color */
  --mjsdiae-input-fore-color: #22d3ee;
  /* new stencil box background color */
  --mjsdiae-newstencil-background-color: #ecfeff;
  /* new stencil box background on hover */
  --mjsdiae-newstencil-background-color-hover: #a5f3fc;
  /* canvas around/behind the edited diagram document */
  --mjsdiae-canvas-background-color: #ecfeff;
}

mjs-diagram-editor.customized-editor-ui::part(panel) {
  border-radius: 0px;
  box-shadow: inset 0 5px 10px #cffafe, inset 0 -15px 10px #fefce8;
}

mjs-diagram-editor.customized-editor-ui::part(toolbar-button) {
  opacity: 0.5;
}

Complete code and reference are available in the UI customization documentation.

« Previous demoNext demo »