How to import bpmn file in the struct of the directory in the page html?

I are trying to render a modelo in the page html, but not can show it in the page.


the script of the page:

    var viewer = new BpmnJS({
      container: $('#js-canvas'),
      height: 600

    function log(str) {
      var console = $('#js-console');
      console.val(console.val() + str + '\n');

    function openFromUrl(url) {

      log('attempting to open <' + url + '>');

      $.ajax(url, { dataType : 'text' }).done(function(xml) {

        viewer.importXML(xml, function(err) {

          if (err) {
            log('error: ' + err.message);
          } else {

    $('#js-open').click(function() {
      var url = $('#js-url').val();

    ///// auto open ?url=diagram-url ///////////////////////

    (function() {
      var str =;
      var match = /(?:\&|\?)url=([^&]+)/.exec(str);

      if (match) {
        var url = decodeURIComponent(match[1]);

the html:

<div class="header">
    <h3>Open BPMN 2.0 diagram from URL</h3>
      <input type="text" id="js-url" placeholder="path to diagram" /><button id="js-open">Open</button>
      <strong>Hint:</strong> try <code></code></strong>

  <div class="canvas">
    <div id="js-canvas"></div>

  <div class="console">
    <textarea id="js-console"></textarea>

I assume you’re referring to the url viewer example which you can try in the browser. What is the error message (open console)?

it looks like it is giving some error to open the file being accessed by the url. Well, the message that appears to me is “attempting to open <>”.

What browser are you using? What changes did you make to the code?

i am using chrome, i want to import the diagram from a directory specific

Did you make any changes to the code? Otherwise this example is supposed to work.

i changed the code for try to open a file .bpmn of the a directory, but this example did not work.

I cannot reproduce this issue. Please try to debug the example and figure out what it is.