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

Plugins
, , , ,
#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)

2 Likes
#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

1 Like
#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

1 Like
#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.

1 Like
#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]]

1 Like
#27

I’m encountering this too, but it’s just not adding new nodes to my flow chart, not sure what’s triggered it.

If you click on edit for the linked tiddler you’ll see that there are more nodes in edit mode than display.

1 Like
#28

This worth to be added to links.tiddlywiki.com
Great piece of work :muscle: :star_struck:

#29

Thanks @Mohammad, I think it’s already on there, and the showcase here :slight_smile:

#30

Well, I took a look and the old version was indexed in links. See
Engineers Text Book — An Hyperlinked Text Book for Engineers

#31

Back on topic, don’t suppose @Sttot you can solve the vanishing node problem? (Doesn’t look likely as they haven’t been on here for over a year :frowning:

@linonetwo I noticed you had a contribution on Git, any insight?

(I found my vanishing problem, the second, or third, set of $$$$ for KaTeX mark up, but it didn’t make things vanish until after another five nodes, then they just stopped displaying!)

#32

Upon further tinkering it’s not the $$$$ for the KaTeX that messes it up but the {} of an escape in the KaTeX, which make me think that maybe it’s {'s and ['s not escaping in the svg might be the culprit. How to solve it, no clue.

Have rasied a github ticket. Draw.io Plugin, diagram bits go missing. · Issue #22 · Gk0Wk/TiddlySeq · GitHub