# 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:** 16
**Page:** 1
### Author:  [@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")
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:
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():
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.
---
### Author:  [@nskerl](https://meta.discourse.org/u/nskerl)
#### Post date: [February 29, 2016, 4:34pm UTC](https://meta.discourse.org/t/help-debugging-sequence-diagram-plugin/40279/2 "2016-02-29T16:34:50Z")
I managed to make some progress by removing replaceBlock and simply doing the transform myself in the dialect.
I also switched to addPreProcessor() and this seems to work _ok_ for the preview window, but the main post still has some problems:
There also seems to be some debounce affect that causes my preview window to fire decorateCooked on every other keystroke?
Any guidance is appreciated.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [February 29, 2016, 8:49pm UTC](https://meta.discourse.org/t/help-debugging-sequence-diagram-plugin/40279/3 "2016-02-29T20:49:56Z")
Any advice or examples we can offer here @eviltrout?
---
### Author:  [@nskerl](https://meta.discourse.org/u/nskerl)
#### Post date: [March 8, 2016, 11:48pm UTC](https://meta.discourse.org/t/help-debugging-sequence-diagram-plugin/40279/4 "2016-03-08T23:48:33Z")
Thanks!
@eviltrout let me know if you have any plugins that I can look to for guidance. I know you recently made a lot of changes to the rendering engine, its possible I am following out-of-date plugin examples.
---
### Author:  [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [March 9, 2016, 7:17pm UTC](https://meta.discourse.org/t/help-debugging-sequence-diagram-plugin/40279/5 "2016-03-09T19:17:35Z")
The [details dialect](https://github.com/discourse/discourse/blob/master/plugins/discourse-details/assets/javascripts/details_dialect.js) seems quite similar to this. It uses `addPreProcessor` as well and it seems to work.
I might be able to help debug further if you share the code so far in a public place such as a github repo.
---
### Author:  [@nskerl](https://meta.discourse.org/u/nskerl)
#### Post date: [March 9, 2016, 7:42pm UTC](https://meta.discourse.org/t/help-debugging-sequence-diagram-plugin/40279/6 "2016-03-09T19:42:04Z")
Great, I posted the project here: [GitHub - nskerl/discourse-sequence-diagram · GitHub](https://github.com/nskerl/discourse-sequence-diagram)
Thanks so much.
---
### Author:  [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [March 9, 2016, 8:49pm UTC](https://meta.discourse.org/t/help-debugging-sequence-diagram-plugin/40279/7 "2016-03-09T20:49:26Z")
Looks like your problem is your regular expression in your whitelist was a global. Global regular expressions will retain state on repeated calls based on the last index, so every second call was failing.
An easy fix is to change it to:
```javascript
Discourse.Markdown.whiteListTag('div', 'class', 'discourse-sequence-diagram');
```
---
### Author:  [@nskerl](https://meta.discourse.org/u/nskerl)
#### Post date: [March 11, 2016, 1:41am UTC](https://meta.discourse.org/t/help-debugging-sequence-diagram-plugin/40279/8 "2016-03-11T01:41:15Z")
wow, yea that would explain the _every other keystroke_ issue. Thanks, ill try this tonight.
---
### Author:  [@nskerl](https://meta.discourse.org/u/nskerl)
#### Post date: [March 12, 2016, 6:46pm UTC](https://meta.discourse.org/t/help-debugging-sequence-diagram-plugin/40279/9 "2016-03-12T18:46:47Z")
Thanks again, that fixed the first issue.
Do you have any idea what would cause the rendering to be different between the editor preview (which looks good) and the cooked content? It doesnt look like tags are being stripped anywhere that I can see; the svg output simply has different dimensions when viewed in the editor vs. the cooked. When we hit `Reply` is the content re-rendered on the backend or should it take the rendered html from the editor?
Editor:
* * *
Cooked:
---
### Author:  [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [March 14, 2016, 10:55am UTC](https://meta.discourse.org/t/help-debugging-sequence-diagram-plugin/40279/10 "2016-03-14T10:55:24Z")
Have a look at the [`CookedPostProcessor`](https://github.com/discourse/discourse/blob/master/lib/cooked_post_processor.rb) class.
>
---
### Author:  [@nskerl](https://meta.discourse.org/u/nskerl)
#### Post date: [March 16, 2016, 8:43pm UTC](https://meta.discourse.org/t/help-debugging-sequence-diagram-plugin/40279/11 "2016-03-16T20:43:19Z")
Doesn’t that only act on `![]()
` tags? It does look suspect though, will continue researching
>
---
### Author:  [@nskerl](https://meta.discourse.org/u/nskerl)
#### Post date: [April 1, 2016, 4:25am UTC](https://meta.discourse.org/t/help-debugging-sequence-diagram-plugin/40279/12 "2016-04-01T04:25:19Z")
@eviltrout Is there a way to prevent the post processor from acting on the resulting svg?
---
### Author:  [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [April 1, 2016, 3:24pm UTC](https://meta.discourse.org/t/help-debugging-sequence-diagram-plugin/40279/13 "2016-04-01T15:24:47Z")
Can you provide more details? How is it acting on the SVG? An example would be good.
---
### Author:  [@nskerl](https://meta.discourse.org/u/nskerl)
#### Post date: [April 1, 2016, 11:46pm UTC](https://meta.discourse.org/t/help-debugging-sequence-diagram-plugin/40279/14 "2016-04-01T23:46:08Z")
@eviltrout See the screenshots above, the preview editor is fine but when the content is viewed in the main post the image (svg) generated by the js plugin is reduced in size. You can see the diagram itself is _squashed_.
---
### Author:  [@nskerl](https://meta.discourse.org/u/nskerl)
#### Post date: [April 11, 2016, 3:36am UTC](https://meta.discourse.org/t/help-debugging-sequence-diagram-plugin/40279/16 "2016-04-11T03:36:19Z")
@eviltrout Thanks for the help. I managed to get this “working” tonight… though it is incredibly slow while typing in the preview edit.The call to the js library that performs the markup–\>svg transform is obviously expensive.
At this point I think my strategy is flawed, as I can’t be rebuilding the svg output on every keystroke, even if the diagram markup isn’t modified. Perhaps I can throttle the call somehow and only rebuild the diagram output after some small delay in keystrokes?
Any ideas to improve are much appreciated!
Latest code is here: [GitHub - nskerl/discourse-sequence-diagram · GitHub](https://github.com/nskerl/discourse-sequence-diagram/)
---
### Author:  [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [April 14, 2016, 3:11pm UTC](https://meta.discourse.org/t/help-debugging-sequence-diagram-plugin/40279/17 "2016-04-14T15:11:04Z")
That sounds like a good idea, but it might be difficult. I’m not sure if any other plugin I’ve experienced has introduced a throttle on render, but since you’re just calling out to Javascript code it should be possible to check the last time you rendered it and return a cached result if it hasn’t changed right?
In the future we’d like to move our rendering pipeline to emit virtual dom nodes which are diffed in the preview. That way we could control when something is re-rendered or not. But that’s unfortunately a while out.