SOLVED: Sequence diagram in meteor: Cannot read property '_actors_height' of undefined

HI all,

Wouldn’t it be cool if we can demo our code using a sequence diagram? Problem is I can;t get it to work. I suspect an issue that I have to use underscore, but my code still links to _ lodash I think…

https://bramp.github.io/js-sequence-diagrams/

it should work like this according to their manual

include the following HTML:

<script src="raphael-min.js"></script>
<script src="underscore-min.js"></script>
<script src="sequence-diagram-min.js"></script>
and now you have two options. You can manually parse the text:
<div id="diagram"></div>
<script>
  var diagram = Diagram.parse("A->B: Message");
  diagram.drawSVG("diagram", {theme: 'hand'});
</script>

Cannot read property ‘_actors_height’ of undefined

my code

import { Template } from 'meteor/templating';
import { Session } from 'meteor/session';
import { _ } from 'meteor/underscore';
import '/imports/ui/UIHelpers';
import { APILogs } from '/imports/api/APILogs';
import '/imports/ui/external/raphael-min';
import '/imports/ui/external/sequence-diagram-min';
// import '/imports/ui/external/underscore-min';

Template.APILogs.onRendered(function() {
    $(".diagram").sequenceDiagram({theme: 'hand'});
});

The HTML

<div class="row">
            <h3 class="ui header">            
                Sequence diagram</h3>
            <p>In this schema you will see the flow from the user requesting the demo page, though the source code of this demo platform to Qlik Sense and back</p>
            <div class="diagram">Andrew->China: Says Hello Note right of China: China thinks\nabout it China-->Andrew: How are you? Andrew->>China: I am good thanks!</div>
        </div>

from

1 Like

anyone please?

How can I ensure my meteor js file uses underscore and not lodash (which I also loaded somehere)

thank you so much

This is a bit of a hack (uses classic client/compatibility), but works: https://github.com/robfallows/diagram

1 Like

Thank you so much! I am gonna try it… Any idea why the standard import .js does not work?

Verstuurd vanaf mijn iPhone

The sequence-diagram library expects a global Raphael object. The only supported way to make use of such libraries in Meteor is to put them into client/compatibility and use sort order to control load order (fortunately, raphael sorts before sequence which is also the required load order :slight_smile:).

1 Like

Solved.

Lodash was causing the issue. I was looking for this with sublime in my import folder, removed the imports, but later on I found I also used it in my client\main.js. I still have to configure the plugin in sublime text that prevents it from searching in the .meteor folder… It now works, thank you so much!

In the end I had to use mermaid.js because the screen got too wide with the other module. There is one thing happening. Apparently I have a CSS conflict because the chart looks different (the colors), not an issue, even better! but somehow the text is not being positioned in the box. And now I am lost, because why is this happening?



in stead of

I guess I have to insert some extra CSS code with mermaid. Sequence-.js worked out of the box…
http://knsv.github.io/mermaid/index.html#styling