Discourse svgbob

Customization Theme component

AI-generated summary

The Discourse svgbob theme component allows users to include ASCII diagrams in Discourse posts that are rendered as high-fidelity SVGs. It re-packages the open-source Svgbob library and can be installed via the Theme Creator. The component supports settings such as extending the content security policy and adding SVG icons.

In the discussion, Decorbuz asks about advantages over yUML. Falco explains that as a theme component, it is easier to install on shared hosting without rebuilds compared to plugins, and notes that svgbob is a free-form drawing tool unlike yUML’s UML focus. Sam notes that the project has moved to his personal repository and is no longer an official theme component.

JamyDodger suggests cleaning up the topic to remove ‘official’ branding, including changing ownership, removing tag icons, and updating the Theme Creator preview. Heliosurge asks about rich editor support and clarifies the usage of the height setting, noting it is optional. Finally, Arkshine submitted a PR to update the library, with plans to merge further feature updates.

1
:information_source: Summary Discourse svgbob allows you to include ASCII diagrams in your Discourse posts that are rendered as SVGs
:eyeglasses: Preview Preview on Discourse Theme Creator
:hammer_and_wrench: Repository Link https://github.com/SamSaffron/discourse-svgbob
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Features

For example:

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

Will render as a high fidelity SVG in your post.

image

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

Settings

Name Description
extend content security policy
svg icons
Translation Default
insert_svgbob_sample Svgbob diagram
22 Likes
Discourse theme components now support Wasm :confetti_ball:
Image Annotator - Allows you to annotate images in the previewer
10

Does it have any advantages over yUML?

1 Like
11

Being a Customization > Theme component instead of a Customization > 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.

8 Likes
20

Note, we moved this to my personal repo, this is no longer an official theme component.

3 Likes
21

I think it needs a little extra undressing to remove all its ‘official’ clothes. :slight_smile: As it’s a wiki I’ve taken the liberty of removing the ‘official’ blurb and hosting info, and dropping the :discourse2: for :information_source:.

Ideally it would also have the topic ownership changed away from @Discourse and back to you, as well as having its tag icon removed and being snipped out of the ‘official theme component’ tag group as well. The hidden #ecb tag also needs to be removed.

The preview in theme creator could also do with being changed from Discourse to yourself as well.

(Theoretically, third-party theme components don’t get their own tag, but you may be able to pull some strings and have an exception :slight_smile: If even you don’t have enough sway for that then the svgbob topics may need a tidy up too)

ETA: Also a removal from the official list in the doc as well Customizing your site with existing theme components

3 Likes
22

Hi Sam, I was wondering if this component if there is plans to add rich editor support?

Also for extra clarity the “SVGblob Height” should maybe clarify to increase adjust.

  • took me a bit to figure out to get a lower box to show in your sample code of 2 boxes. I needed to increase this value to see completed blob.

Update: Used your sample insert from composer. I see it doesn’t define SVGblob height. So I am guessing this setting is optional if you want to restrict height

Awesome component

23

I made a PR FEATURE: Add rich text editor support - Pull Request #42 - SamSaffron/discourse-svgbob - GitHub.

If it’s merged, I will make another one to update SVGBob; it seems there are new features. :+1:

4 Likes