I tried nyan bpmn example

On the palette, it well looks like the nyan.
but from the time i drag, the shape looks like the type i specified(bpmn:ServiceTask), not the cat.

i dragging, it do not go through the candRender and drawShape api parts of my custom renderer source.

help me

What exactly did you try? Where did you get stuck?

I tried exactly the same as the nyan example.
but its do not work as i want.

import inherits from 'inherits';

import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer';

import {
} from 'bpmn-js/lib/util/ModelUtil';

import {
} from 'diagram-js/lib/util/RenderUtil';

import {
  append as svgAppend,
  attr as svgAttr,
  create as svgCreate
} from 'tiny-svg';

 * A renderer that knows how to render custom elements.
  export default function CustomRenderer(eventBus, styles) {

  BaseRenderer.call(this, eventBus, 1500);

  this.candRender = function(element) {
    return is(element, 'bpmn:Task');

  this.drawShape = function(parent, shape) {
    let url = 'data:image/gif;base64,R0lG..'

    let gfx = svgCreate('image', {
      x: 0,
      width: shape.width,
      height: shape.height,
      href: url

    svgAppend(parent, gfx);

    return gfx;

inherits(CustomRenderer, BaseRenderer);
CustomRenderer.$inject = [ 'eventBus' ];

i coded above code,

export default {
  __init__: [
  ElementFactory: [ 'type', CustomElementFactory ],
  CustomRenderer: [ 'type', CustomRenderer ],
  PaletteProvider: [ 'type', CustomPalette ],
  customRules: [ 'type', customRules ],
  customUpdater: [ 'type', customUpdater ],
  contextPadProvider: [ 'type', customContextPadProvider ]

I registered, but this do not work.


You got a typo here. It should be canRender.

I did not know that.
thank you

1 Like