Hey guys i can't start the bpmn library, anyone has an answer?

Developers
1

Screenshot_1

This hapens and i know what is the problem!

help me please this is the code:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HEY!</title>

<script src="Librerias/bower_components/bpmn-js/dist/bpmn-viewer.js"></script>
<script src="Librerias/bower_components/bpmn-js/dist/bpmn-modeler.js"></script>
<link rel="stylesheet" href="Librerias/bower_components/bpmn-js/dist/assets/diagram-js.css">
<link rel="stylesheet" href="Librerias/bower_components/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css">





    <head>


<body>
<div id="canvas"></div>


<script>


    var viewer = new BpmnJS({ container: 'body' });

    viewer.importXML(bpmnXML, function(err) {

        if (err) {
            console.log('error rendering', err);
        } else {
            console.log('we are good!');
        }
    });


</script>



</body>
</html>
2

Try to change var viewer = new BpmnJS({ container: 'body' }); to var viewer = new BpmnJS({ container: '#canvas });.

Also why are you including both viewer and modeler? You can use only modeler. If you need to instanciate viewer just use new BpmnJS.Viewer()

3

This is not a library, but a CSS issue. Make sure the <body> element has the appropriate height (i.e. 100%).

Hint: Try out the Dev Tools (F12 in your Browser) to inspect the page and trace down these kinds of issues.