README.md

Custom font

DISCLAIMER: this extension point is very experimental and is subject to change.
In particular, the way of changing the defaults will be done via configuration in the future.

Javascript example

• ⏩ live environment
• to run locally, open the index.html directly in a Web Browser

♻️ Usage

Override the BPMN element fonts using various ways. mxGraph knowledge is required to handle style changes. See the development documentation for more details.

⚠️To avoid having to many content in the README, we simplify it. You can find all the content of the example in index.js.

ℹ Generally, the style keys and values constants are related to the mxConstants object that comes from mxGraph. For reference, see the mxConstants API.
We are using FontStyle and StyleIdentifiers here that store the constants string values. They are defined in style-identifier.js. But you can also use the string value directly, for instance style['fontStyle']=....

Content:

• override default font:

configureStyle() {
  const styleSheet = this.graph.getStylesheet(); // mxStylesheet
  // edge
  const defaultEdgeStyle = styleSheet.getDefaultEdgeStyle();
  defaultEdgeStyle[StyleIdentifiers.STYLE_FONTFAMILY] = 'Courier New,serif';
  defaultEdgeStyle[StyleIdentifiers.STYLE_FONTSIZE] = 12;
  defaultEdgeStyle[StyleIdentifiers.STYLE_FONTSTYLE] = FontStyle.FONT_ITALIC;
  // vertex
  const defaultVertexStyle = styleSheet.getDefaultVertexStyle();
  defaultVertexStyle[StyleIdentifiers.STYLE_FONTFAMILY] = 'Courier New,serif';
  defaultVertexStyle[StyleIdentifiers.STYLE_FONTSIZE] = 12;
  defaultVertexStyle[StyleIdentifiers.STYLE_FONTSTYLE] = FontStyle.FONT_ITALIC;
}

• different fonts for event, gateway and task: extend the lib class entry point

class BpmnVisualizationCustomFonts extends BpmnVisualization {

    constructor(containerId) {
        super({ container: containerId });
        this.configureStyle();
    }

    configureStyle() {
        const styleSheet = this.graph.getStylesheet(); // mxStylesheet

        const userTaskStyle = styleSheet.styles[ShapeBpmnElementKind.TASK_USER];
        userTaskStyle[StyleIdentifiers.STYLE_FONTFAMILY] = 'Courier New,serif';
        userTaskStyle[StyleIdentifiers.STYLE_FONTSIZE] = '14';
        userTaskStyle[StyleIdentifiers.STYLE_FONTSTYLE] = FontStyle.FONT_BOLD + FontStyle.FONT_ITALIC;
    }
}

const bpmnVisualizationCustomFonts = new BpmnVisualizationCustomFonts('bpmn-container-custom-fonts');

Note: for example about font colors, see the custom-colors example.