Lightweight diagrams (e.g. concept maps)?

[Sean Boyle]

I have seen the plugins which allow tiddlers to represented graphically.  I would like to see something lightweight which would simply allow the drawing of simple diagrams within a tiddler, something like the railroad diagram plugin, possibly using graphiviz syntax.  Has anyone done this?

[@TiddlyTweeter]

Ciao Sean

Drawing what? What kind of diagrams do you need?

There are several logical diagramming plugins. Maybe not so easy to find all of them if you unfamiliar. I probably can find them if you need.

I believe there is a well featured Mermaid plugin that does complex flow diagrams & Gannt charts. There are also several simple branching hierarchy flow chart plugins.

Best wishes
Josiah

[@TiddlyTweeter]

For more complex conceptual thinking you should look at TiddlyMap which is very rich, stable & proven, & wholly dedicated to concept mapping.

On Saturday, 15 July 2017 00:41:22 UTC+2, Sean Boyle wrote:

[Thomas Elmiger]

We have this: http://tiddlywiki.com/#Railroad%20Diagrams – maybe you want to use the Railroad plugin.

[TonyM]

Sean,

Perhaps there is a gap in my understanding but I always assumed that apps written in java script may be adapted to work in or with tiddlywiki, one tool I have used for years is freemind which although 11MB in a JAR file would work well with tiddlywiki. Even just import and export may be possible. http://freemind.sourceforge.net/wiki/index.php/Main_Page

Also much simpler I have started using the stylesheet only family http://familytree.tiddlyspot.com/  which creates hierarchical diagrams from bullet lists. This may even provide a way to achive what you need.

Regards
Tony

[Eneko Gotzon]

Hi Tony.

On Sun, Jul 16, 2017 at 2:28 AM, TonyM <anthony...@gmail.com> wrote:

one tool I have used for years is freemind…

​Freeplane –a fork of FreeMind– is under active​ development and very well served.

Wikipedia says that the latest stable release of:

• FreeMind (1.0.1) was in September 12, 2014.
• Freeplane (1.5.20) was in April 20, 2017. There is also a preview of the 1.6.12 version released in February 27, 2017.

​More information:

• Relationship between FreeMind​ and Freeplane.
  
• Freeplane features you were missing in FreeMind.

​I'm a happy & grateful user of Freeplane.​

--

Eneko Gotzon Ares
eneko...@gmail.com

[TonyM]

Looks Good Thanks

[Matthew Lauber]

nvm, found it here https://groups.google.com/forum/#!searchin/tiddlywikidev/Mermaid%7Csort:relevance/tiddlywikidev/vC-CbAP9pVw/Vz5iZ9wgBwAJ

[Sean Boyle]

Thanks Josiah
I installed mermaid (and the other bits from https://gt6796c.github.io/.
The flowchart seems to work OK, seqdiag seems to be broken, of the mermaid stuff, dags and sequences seem to work, but gantt is broken.  For what I want to do, dags and sequences solve the problem.
Perhaps in future, some people shall tackle UML, BPMN, Southbeach, CORAS and perhaps even some generic drawing of computer networks.

Thanks to all who responded!

[Mark Grant]

👀

Sent from Astro for Slack

[Mark Grant]

👍

Sent from Astro for Slack

[Mark Grant]

:thinking_face:

Sent from Astro for Slack

[@TiddlyTweeter]

Ciao Sean

Its really a beta demo, I think. Its never been honed. Mainly because there was virtually no feedback to the author, either here, or on GitHub. Its definitely in the right direction IMO. Maybe someone can build off it.

Josiah

[Sean Boyle]

Does the author monitor this, or should I go elsewhere?  I do have some feedback...

[@TiddlyTweeter]

Ciao Sean

Great you try to comment. You'll need be on (sign up for) GitHub at https://github.com/

Then open a "New issue" at https://github.com/gt6796c/mermaid-tw5/issues to write whatever you want.

IF in your message you include my github name "@tiddlytweeter" I will get a copy of whatever you write and will comment back if I see follow up is needed.

Best wishes
Josiah

[Sean Boyle]

I just checked in after a hiatus.  It appears that this has not progressed.  Though it has warts, it is the best thing going.  The graphviz-like syntax is simple and elegant.  The only real inconvenience at this point is an inability to print or export.  I am able with most any tiddler to copy/paste to a web-based email client (Outlook web access), but the drawings do not come across.  Printing also renders as simply blank.  The other issue reported is more of an annoyance, but these are more serious.  Is there a future for this plugin?

[@TiddlyTweeter]

Ciao Sean

I agree that Mermaid for TiddlyWiki is good. Its simple plain text syntax is excellent and fits TW editing style very well.

Regarding the non-printability. That is a known issue with that type of graphic rendering. I'm not sure that its easily fixable. The way I get round it if I need to print a Mermaid diagram is to take a screen capture save as a file and link to that image in the TW. Its too laborious a method for other than occasional use, but a work-around for limited cases.

You are right: looks like its been basically abandoned. Part of the issue is I think the author probably concluded that no one was interested. He has other good graphic tools that equally haven't got much notice.

As far as I can see it needs a bit of tweeking -- one issue I sometimes encountered was getting the text to fit properly. But the core is there and functional.

As far as getting the plugin revised. I dunno. I don't have skill for that. Its a good tool so maybe in time interest to revisit it will grow?

Best wishes
Josiah

[Sean Boyle]

My workaround is to use the online editor: https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbkFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuQiAtLT4gQ3tMZXQgbWUgdGhpbmt9XG5DIC0tPnxPbmV8IERbTGFwdG9wXVxuQyAtLT58VHdvfCBFW2lQaG9uZV1cbkMgLS0-fFRocmVlfCBGW0Nhcl1cbiIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0In19 , save as SVG, import to TW, and transclude.  That seems to work OK for copy/paste to other windows.  It does seem to be a problem for other graphical stuff, like railroad diagrams.

[Sean Boyle]

I found that sequence diagrammes seem to copy / paste, but DAG and GANTT do not.

[Sean Boyle]

Pinging this topic again.  It appears that diagramming plugins come, then are abandoned.  I have taken to using graphviz (viz plugin) and it works reasonably well (only a bit quirky) and if there were some reasonable ways of adding symbols for creating graphs such as flowchart, CORAS, BPMN, sequence, communication diagrams, it would fulfill 90% of my needs.  Having said that, are there any efforts out there for incorporating lightweight graphing with extensible symbol sets, or diagramming?

[Victor Dorneanu]

Hi,

there is also PlantUML: http://tobibeer.github.io/tw5-plugins/#plantuml

I've used this for some proof-of-concept I was doing:

https://tiddly.info/serverless#about

KR,

Victor

[Sean Boyle]

Hi Victor,

Thanks for the reply!

Yes, I tried out PlantUML (nice sequence diagram, btw).  I don't know if it is still that way, but it used to be that the drawing was pushed to an internet server for processing.  I'm more interested in something which is self-contained, especially since some of my diagrams could be considered sensitive, but in general I like self-contained solutions.  Some others which I have tried out are:

* Mermaid

* Graphviz

* Railroad

* Tidgraph

* edit in an external tool, render, and import the SVG (usually yEd)

[Sean Boyle]

It feels silly replying to myself, but...

Some possibilities are:

• mxgraph - this is the basis for draw.io, which has a GUI, &c.  A GUI is not strictly necessary, but would be handy for some things - free
  
• JointJS - Seems to support the usual diagram types, including BPMN free
  
• yEd - I really like the layout options, being able to import SVG nodes.  It is free for any use, but if the underlying libraries (yFiles) are to be used, they have commercial licencing..

The trick is finding someone with the chops to be able to integrate something like one of these, then stick around to update from time to time.  I get the impression that most people are not really interested in diagrams to sit alongside the notes in a tiddler.  The closest thing so far is viz and railroad, which are both rather limited.

[Ste]

All for diagrams and drawings! I find myself using a variety of tools though as lot of packages don't do things like dimensions/ line lengths or a centre line....I basically want AutoCAD LT but for .svg :) https://editor.method.ac/ does in a pinch for simple stuff.  Bizarrely PowerPoint has quite robust drawing and line animation features these days!...reads back...GANTT charts you say?!  where?

[Sean Boyle]

The mermaid (https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/gantt.html) plugin supports gantt, but it is a bit quirky.  IIRC, the mermaid plugin was released but abandoned.  The types of diagrams that the parent project supports at this point are:

* flowchart

* sequence diagrams

* class diagrams

* state diagrams

* entity relationship diagrams (ERD)

* user journey diagram (I had never even heard of these before seeing it on the mermaid site)

* gantt chart

* pie chart

[Sean Boyle]

@jermolene, have you heard of any projects along this line?

[TiddlyTweeter]

Ciao Sean

The scope of Mermaid is GOOD.

I think part of the reason the TW plugin is orphan to great (never revised for obvious problems) is it never got good cheers in the first place.

It is always a bit of a serendipitous event here getting kudos on launch.

That is NOT ill-will. It is merely low numbers.

We do lose things that way though.

TT

[PMario]

Hi Sean,

On Friday, October 30, 2020 at 1:08:57 AM UTC+1, Sean Boyle wrote:

Pinging this topic again.  It appears that diagramming plugins come, then are abandoned.

That's right. It seems there has gone quite some work into the integration into TW. ... but ... it was only implemented as "basic wrapper" widgets. Which means for most cases. Only basic functions are available for the user. ...

So for me it looks like a 20/80 approach. 20% of time invested to get 80% of functions out of it.

This gives you the possibility to implement 5 different libs (as seen at: https://gt6796c.github.io/) at the same time as doing 100% for 1 library. ... (sometimes) That's a good idea

It seems none of the libraries took of (eg: lack of feedback), so the whole thing was abandoned. ... Or the author didn't need the functionality anymore. ...

 

I have taken to using graphviz (viz plugin) and it works reasonably well (only a bit quirky) and if there were some reasonable ways of adding symbols for creating graphs such as flowchart, CORAS, BPMN, sequence, communication diagrams, it would fulfill 90% of my needs.

 

  Having said that, are there any efforts out there for incorporating lightweight graphing with extensible symbol sets, or diagramming?

I'm a bit concerned about the term "lightweight". ... IMO none of those functionalities are "light". Neither in terms of complexity to implement it, nor in terms of executable code. .. and it should contain "custom" symbol sets and "pluggable" diagramming functions. ... Which is a fully blown plugin-system in itself.

eg: mermaid.js has 2.8 MByte of "bundled" js code. The minified version still uses 800kByte of code, without any CSS. So this 1 library basically has the same size as empty.html. .. Where TW core-code isn't minified to make it easy for "users" to learn about / and debug the code.

Had a look at the mermaid.js code for about 2+h. ... They are using several libraries, that do the heavy lifting for the visual rendering. mermaid.js seems to be responsible for the bigger part of parsing text-type content into data structure, that  the libs can understand. ...

============

Had a look at the terms CORAS and BPMN ... Where searching for BPMN gave me a 500 page PDF manual. .... Now I'm amused about "lightwight" ;)

CORAS lead me to an Enterprise Decision Management Software with a hefty price tag. ...

============

I think I can see, why you pinged that 3 year old topic again ...

Mermaid seems to have a CLI version. .. So it shuldn't be to hard, to create "save as SVG" option. ...

Just some thoughts.

mario

[TiddlyTweeter]

PMario wrote:

... So for me it looks like a 20/80 approach. 20% of time invested to get 80% of functions out of it.

This gives you the possibility to implement 5 different libs (as seen at: https://gt6796c.github.io/) at the same time as doing 100% for 1 library. ... (sometimes) That's a good idea

 Right. Ambitious but useful.

It seems none of the libraries took of (eg: lack of feedback),

Right. There was virtually no feedback at all. Though the tool really needed a lot to help the author.

I am pretty sure that is why its development froze. They got no feedback.

--- 

The "Mermaid" approach is interesting.

Mainly because  it is a unifying front-end that, if done well, would save a lot of hassle.

Best wishes

TT

[Sean Boyle]

CORAS: http://coras.sourceforge.net/ It is unfortunate that there are name collisions.  This is a methodology and a set of symbols to be used with drawing software, not related to the ginormous commercial package by the same name.  BPMN is certainly well documented and there are large tools which can automatically create workflows, &c. For creating drawings, it is really just a set of swimlanes and symbols which extend the IBM flowchart symbol set, which is a smaller problem.  Neither of these in and of themselves should radically grow an existing tool.

I can appreciate that no one wants to work on a plugin, send it out for feedback and get none, and perhaps I am guilty of that very thing as I have tried several of them.

Size is a problem.  There is the problem that each graphics plugin seems to have their own library, so they are all additive.  One must certainly be choosy.  At this point, I have several graphics related plugins loaded (railroad, tidgraph, rocklib/ mermaid-tw5, visjs, viz).  Tracking dependencies is not exactly easy (any advice on this?) and I seriously need to do some preening, but I have tried to torture one or more of these to get to my end goal.  It might be smarter to strip all of these out, store the source bits for any drawings, cook them externally and import the SVG (hoping that the external tools do not bloat the SVG too much).

I am probably already asking a lot of it already by having several years worth of journals with drawings, all encrypted.  My initial plan was to replace a daily planner and moleskine / engineering pad with a software version which is as platform independent as possible today, lightweight, and fulfills much of the requirement which I traditionally would fulfill with a pencil.  In the abstract, it is simple enough.  The implementation is really the dickens, no doubt filled with what TRIZ folks call contradictions.  For now, I should probably stick with it for the strengths and go elsewhere for the missing bits.  Before trying to integrate all with Tiddlywiki, I was using yEd (https://yworks.com/products/yed) for BPMN and CORAS (imported the symbols), and something like draw.io (jgraph).

This was a good discussion.  Thanks to TiddyTweeter and PMario!

[Jason Houle]

This is a question that vexed me for quite some time so I want to offer an update this thread for anyone coming across this later.

There are now two good options for using Mermaid.JS within TW5:

"Complete" Mermaid.js library installation into TW5: As noted above, this is the full library, but has been updated as of October 2021 and published with a demo wiki to make installation a breeze.

Demo wiki: https://efurlanm.github.io/mermaid-tw5

Lightweight TiddlyWiki5 plugin that wraps Mermaid Live Editor: I just published this as a very lightweight (18kb) "wrapper" of the Mermaid Live service which handles all the rendering. All the power of Mermaid with streamlined code management and virtually no TW bloat.

YouTube: https://www.youtube.com/watch?v=e78RRDp-NZg
GitHub repo: https://github.com/jasonmhoule/tw5-mermaid
Demo wiki: https://jasonmhoule.github.io/tw5-mermaid/