Discourse svgbob

Discourse svgbob allows you to include ASCII diagrams in your Discourse posts that are rendered as SVGs

For example:

```svgbob height=54
+--------+      +------------+
| A Box  |----->|Another box |
+--------+      +------------+

Will render as a high fidelity SVG in your post.


The component re-packages the open source Svgbob library, an online playground for svgbob is at: Svgbob editor

Minimal requirements: The component leans on very recent changes to Discourse core and will require Discourse 2.9.0.beta4 or a current default install.


It isn’ working out of the box:

1 Like

Did you update discourse to latest today?


Of course not :man_facepalming:

My bad. Normally I do that everytime when some new structures has introduced.


This is so cool :heart_eyes:

Two suggestions:

  • is it possible for the component to add wasm extension to settings.theme_authorized_extensions by itself (it requires an additional manual step now)
  • svg lines and text are rendered in black, which makes them invisible in dark mode. Is it possible to detect dark mode and render lines and text in white.

Please do Chart.js as a theme component next!!! (the Discourse-chart plugin exists, but is very limited).


Already changed in core to add wasm in the default allow list, are you sure you did not fiddle with extensions on your install?

Great suggestion will see if I can add dark mode support!


@sam even it is really good idea update, that wasn’t the issue this time. There was a conflict between this and unanswered filter.

Edit: and this isn’t issue any more


You’re right, I added extensions to the list manually before.


1 Like

Dark mode support now added.


Does it have any advantages over yUML?

1 Like

Being a #theme-component instead of a #plugin means it can be installed easily, even on shared hosting, and there is no need for rebuilds.

yuml also draws, well, UML diagrams, while svgbob is a free form drawing tool.


Email notification for post containing svgbob displays ASCII diagram rendered as a <pre><code> block rather than svg, is there any chance the diagram could be converted to svg or png prior to sending an email?

1 Like

A #theme-component won’t be able to do it cleanly.


Wow. I love it!

In my first interaction with it I’ve found that when I go to edit the ascii text the height instructions for svgbob are rewritten to the initial value that I set. In my case, I set it to height=21. Now I want it to be much larger but something keeps overwriting that value and it reverts to 21. It feels very javascript. Is it just me or has someone else seen this. I’ve on a hosted Discourse instance, so up-to-date with Discourse.

1 Like

yeah it auto calculates the height, I totally can get that it can be somewhat annoying if you want to override, can you paste the ascii for diagram? Is it cropped at height 21?

In some iterations it was cropping at 21. Currently it isn’t, though it is cropping a little bit short of full height and the SVG is displaying a scrollbar on the right hand side.

Here’s the code, I copied it from the svgbob examples, and added a small piece of my own at the top.

o-> Simple Things

+------+      +-------+
| user | o--> | notes |
+------+      +-------+

 o-> Mindmaps

                                            .-->  Alpha
                                          .---->  Initial Release
          Planning *-------.             /         \
                            \           /           '---> Patch 1
      Initial research       \         /             \
                *             \       /               '-->  Patch 2
                 \             \     /---------> Beta
                  \             \   /
                   \             o o                      _______
                    \          .---. *--.___             /       \
                     '------> (     )       '------O->  . Release .
                               `---' o                   \_______/
                               o  o o \
                              /    \ \ \
                          .--'      \ \ \
                         /           \ \ '----+->  Push backs
                        /             \ \      \
                       /|              \ \      '----> Setbacks
                      / |               \ \
                     V /|                \ '-----> Reception
                Team  / |                 \
                     v /|                  \
             Worklaod / .                   '-->> Career change
                     V /
                 PTO  /

1 Like

Oh I think we have a 500px max height on code blocks (just like your example above). svgbob is inheriting it.

I guess there is no huge harm in removing this limitation? In the mean time you can easily just add a theme component to your site that overrides this.

Something like

.cooked {
  pre[data-code-wrap="svgbob"] {
    max-height: 10000px;

That’s good to know. I’ll watch and see how it’s used. The initial feedback is negative :roll_eyes: