The most powerful "All in One" diagram editor -- for UML, Circuit, Flowchart, etc

Plugins
, , , ,
#7

@Sttot this is wonderful and I can finally easily draw Ideas graphically and use them as needed and without bloat. Very good thank you.

  • There is no doubt this is extreamly useful as it stands

Unfortunately as a tiddlywiki wiki enthusiast, I would also like to integrate it with my tiddlers, I can see that by storing the diagrams as SVG this is quite likely possible.

Perhaps as a community we can experiment, develop and share some Draw/tiddlywiki integration tips.

For example;

  • Allowing links to tiddlers or inclusion of content in the diagram.
  • Perhaps ways to use simple diagrams in list widgets with computed values.
    • Eg list a set of tiddlers and have them represented using process icons in a serial list with arrows etc…
  • Insert or transclude tiddlers into a diagram eg; Buttons, lists other diagrams, fields etc…

Of course to be able to extend the editor to assist with this integration would be great, but only as long as it keeps the compatibility and ease of draw updates available.

1 Like
#8

That will be handled by whiteboard plugin.

Drawio diagrams are pure svg. and can only edit when have Internet access, so it is fast, small and mobile-friendly.

For whiteboard, it bundled react based editor, and need a runtime to see, so it is powerful, but will be much larger and need more resource to view.

1 Like
#9

I get a javascript exception when using the plugin in android

#10

The drawio link widget allows for linking to other tiddler in the form of #tiddlerName, however it seems to only work once, then fails to reopen the tiddlerName on additional clicks.

Tiddler_Link_in_DrawIO.json (3.8 KB)

#11

any details? how and when.

#12

Try wikitext for the link instead. The diagram is stored as svg and processed as normal wikitext when displayed. Therefore any wiki syntax including links can be used.

#13

@Sttot this is fantastic work, really great and useful!

Do you have an online git repository for the source code? I was able to use a Javascript prettifier to help me read the code, but it would be better to be able to read the original source.

Some things I noticed:

  • I’m impressed that draw.io has such a nice and nicely documented embed mode. You still had to figure out how to best make use of all the options.
  • You figured out and implemented your own Tiddlywiki editor type. I’m not sure if how to do that is documented anywhere, but the result is a seamless experience with the Tiddlywiki draft mechanism.

Very well done.

1 Like
#14

Thanks @btheado , i found that if type [[foo]] text in editor, the SVG will link to foo tiddler!

image
image

@TW_Tones @john.edw_gmail.com

#15

TiddlySeq/src/drawio at master · Gk0Wk/TiddlySeq (github.com)

1 Like
#16

While I prefer text-based diagrams a la Mermaid/PlantUML/etc., there are times none of them is enough for what I want. Then I turn to draw.io. Having this embedded in TW is amazing.

I’ve tried, and it works just fine for my uses, although I haven’t tried anything complicated yet.

Thank you very much for what must have been some hard work putting this together. The community owes you a huge debt!

#17

This is pretty cool! It does recognize tiddler names and links to them if the square brackets are used. However, if the tiddler has an ampersand (&) in the title, it defaults to the html code & and not simply &. This causes issues with the diagram (see screenshot below for the Hutchinson & Southern Railway). Is there some setting I can change for this not to happen?

image
image1100×324 24.4 KB

#18

HistoryBuff,

I don’t have a proper solution (after trying with with Char codes and such), but for limited situations, here’s a potential workaround:

It turns out that filter expressions are honored!

So if your diagram has the text

 {{{ [prefix[Hutchinson]suffix[Southern Railway]] }}}

the rendered draw.io resolves this filter expression into a link to Hutchinson & Southern Railway — assuming that no other tiddler fits the filter.

:slight_smile:

#19

Thanks! Great idea! I’ll have to give that a try.

#20

this is really cool!

there might be a bug involving second close brackets ]]

which may account for some of the “hiding” bugs; the first ]] works fine for wikitext links, as soon as there is another ]] (e.g. second wikitext link) then a portion of the following svg code is not rendered because of the way the ]] is interpreted?

maybe a solution similar to Help with escape sequence for ]] might work

#21

Has anyone investigated using this to edit or generate tiddlywiki button images?

You can make images that you size appropriately but it would be nice if we could import a core image and edit it, to get variations for the solutions we build.

#22

No, and I don’t have the time to do so now, but it’s a fascinating idea: one more piece of the toolkit used for building tiddlywikis embedded in TW. I like it!

(Of course draw.io only gives you the coarsest control over the generated SVG, and we might need more, but maybe we don’t. Hmm…)

1 Like
#23

Hi @Sttot

Excellent implementation.
I will use it to make process documentation in the future.

Let me know if I can help out by testing functions etc.

image

Stefan

#24

I have been reviewing this from various aspects. First thank you. Very useful. Having a genealogical solution for TiddlyWiki always prompts me to review graphical tools. I found this very interesting. I am working out ways to generate genealogical diagrams automatically from this draw.io plugin. Since my diagrams could potentially have very large canvas sizes I have a couple of questions.

  1. How can we get the view of the tiddler/diagram to be zoomable?
  2. The draw.io supports multiple pages (tabs). How can we get the view of the diagram tiddler to provide these pages/tabs to the user? I have noticed that the last page I’m on when I save the tiddler is one the view shows.

Thanks,

Craig

#25

WhiteBoard plugin support zoom param and multip tab (on top-left menu).

While it’s plugin size is much larger than draw.io plugin.

#26

@Sttot thank you so much for this plugin. I also recognized that “hiding” bug, check this out if you want to reproduce it. Would love to see a fix for it!

https://showroom.tiddlyhost.com/#:[[everything%20shows%20up]]%20[[something’s%20missing]]