Add bpmn:Documentation Programmatically

Hi, I figured out how to programmatically set & override id & name of the process node, like

const modeling = modeler.get('modeling');
const canvas = modeler.get('canvas');
const elementRegistry = modeler.get('elementRegistry');

const rootElement = canvas.getRootElement();
const processId =;
const process = elementRegistry.get(processId);

modeling.updateProperties(process, {
   id: "some_new_id",
   name: "some_new_name",

which will set my process node to <process id="some_new_id" name="some_new_name" />.

But how do I attach a documentation node? So the desired output would be

<process id="some_new_id" name="some_new_name">

You can use BpmnFactory to create the documentation element and Modeling to add it to a shape:

const bpmnFactory = modeler.get("bpmnFactory"),
      elementRegistry = modeler.get("elementRegistry"),
      modeling = modeler.get("modeling");

const documentation = bpmnFactory.create("bpmn:Documentation", {
  text: "Hello World"

const startEvent = elementRegistry.get("StartEvent_1");

modeling.updateProperties(startEvent, {
  documentation: [documentation]

CodeSandbox: Add Documentation Example - CodeSandbox

1 Like

Thanks a lot Philipp!

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.