# Help debugging Sequence Diagram plugin

**URL:** <https://meta.discourse.org/t/help-debugging-sequence-diagram-plugin/40279>\
**Category:** Development\
**Created:** [February 28, 2016, 6:31am UTC](https://meta.discourse.org/t/help-debugging-sequence-diagram-plugin/40279 "2016-02-28T06:31:54Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![nskerl](https://avatars.discourse-cdn.com/v4/letter/n/13edae/32.png) [@nskerl](https://meta.discourse.org/u/nskerl)\
**Post date:** [February 28, 2016, 6:31am UTC](https://meta.discourse.org/t/help-debugging-sequence-diagram-plugin/40279/1 "2016-02-28T06:31:55Z")

</div>

I am trying to cobble together a plugin that will support simple sequence diagrams in posts.

For example, this:

```
[seqdiagram]
A->B:one
B->A:two
[/seqdiagram]

```

Would result in this:

 ![](https://global.discourse-cdn.com/meta/original/3X/4/4/449eed667706681dacc81e6728cccc2fb908a37b.svg)

The [JS Sequence Diagram](https://github.com/bramp/js-sequence-diagrams) library handles the text–\>svg function, so my first attempt is to simply wrap that library within Discourse.

Based on examples found here I put together this plugin: [GitHub - nskerl/discourse-sequence-diagram · GitHub](https://github.com/nskerl/discourse-sequence-diagram)

Here I am using `replaceBlock()` to find the `[seqdiagram]` tag and push its contents into the div needed by the diagram lib.

```
    //assets/javascripts/sequence_diagram_dialect.js
    (function() {
      Discourse.Dialect.replaceBlock({
        start: /(\[seqdiagram\])([\s\S]*)/igm,
        stop: '[/seqdiagram]',
        rawContents: true,
        emitter: function(contents) {
    		return ['p', ['div', { class: 'discourse-sequence-diagram'}].concat(contents)];
        }
      });
      Discourse.Markdown.whiteListTag('div', 'class', /^discourse-sequence-diagram$/igm);
    })();

```

Then, in my initializer I am calling the lib to do the text to diagram transform:

```
import { withPluginApi } from 'discourse/lib/plugin-api';

    export default {
    	name: 'discourse-sequence-diagram',
    	initialize() {	
    		withPluginApi('0.1', api => {
    			api.decorateCooked($elem => $elem.find("div.discourse-sequence-diagram").sequenceDiagram({theme: 'hand'}));
    		});
    	}
    }

```

When I type in the opening [seqdiagram] tag I see the following error thrown in the console: “Uncaught TypeError: e.stop.exec is not a function”

It appears its coming from this section of code in replaceBlock():

 ![](https://global.discourse-cdn.com/meta/original/3X/e/0/e0c0d572c1771bca5490685da64d4b0a7e27cbf9.png)

Any help in debugging this in much appreciated! I’d also like to know how others would implement this feature; perhaps a plugin is not the place?

I am confident the other areas of the plugin are setup ok-- if I swap the call from replaceBlock to inlineBetween I can get svg output, but only on a single line and its a bit wonky with spaces.

---

_[View the full topic](https://meta.discourse.org/t/help-debugging-sequence-diagram-plugin/40279)._