Discourse svgbob

[sam (Sam Saffron)]

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

	Repo	GitHub - discourse/discourse-svgbob: svgbob component for Discourse
	Install Guide	How to install a theme or theme component
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

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.

[Jagster (Jakke Lehtonen)]

It isn’ working out of the box:

[sam (Sam Saffron)]

Did you update discourse to latest today?

[Jagster (Jakke Lehtonen)]

Of course not

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

[md-misko]

This is so cool

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).

[sam (Sam Saffron)]

@md-misko

is it possible for the component to add wasm extension to settings.theme_authorized_extensions by itself (it requires an additional manual step now)

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

@md-misko

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.

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

[Jagster (Jakke Lehtonen)]

@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

[md-misko]

@sam

are you sure you did not fiddle with extensions on your install

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

@sam

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

Thanks!

[pmusaraj (Penar Musaraj)]

Dark mode support now added.

[Decorbuz]

Does it have any advantages over yUML?

Discourse-yuml: Add yUML diagrams to discourse posts

discourse-yuml adds yUML support to discourse. From the readme discourse-yuml Add the ability to write yUML class diagrams directly into a discourse post. [Example of yUML diagram in discourse] Installation Docker To install in docker, add the following to your app.yml in the plugins section: hooks: after_code: - exec: cd: $home/plugins cmd: - mkdir -p plugins - git clone https://github.com/discourse/docker_manager.git - git clone htt…

[Falco]

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.

[md-misko]

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?

[Falco]

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

[fyodorovich (Malcolm Fitzgerald)]

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.

[sam (Sam Saffron)]

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?

[fyodorovich (Malcolm Fitzgerald)]

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  /
                     V
                 Bug

[sam (Sam Saffron)]

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;
   }
}

[fyodorovich (Malcolm Fitzgerald)]

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