New graphviz (diagram and graphs) plugin created

[Eduardo Granados Gomez]

Hello I have create a graphviz plugin. You can see here https://github.com/chanilino/tw5viz. How can I share this plugin with the comunity?

Thanks

[Ste Wilson]

Very cool.
This is the main place to share, so you just have and I'm sure Dave will add it to his massive list!

[Mohammad]

look at this list

https://dynalist.io/d/zUP-nIWu2FFoXH-oM7L7d9DM

David Graford mainatin it and he will add it ti the list.

[Sean Boyle]

Nice work.  It doesn't leave relics on the screen like the mermaid plugin (but yes, I still like mermaid).

Even with this, I am not able to copy the diagrams to paste to another app.  Is this a deficiency of Vis.js?  My use case is creating a report in tw, the copy-paste into email.  The text makes it through just fine, but no joy with the graphics.

[TonyM]

Eduardo,

Thanks for this, I am looking at it closely, however you also inspired me to make this post in the TiddlyWikiDev group

https://groups.google.com/forum/?hl=en#!topic/tiddlywikidev/Mynp-eI0aiM

Regards

Tony

[TonyM]

Eduardo

Drag and drop of the plugin to install does not seem to be working, it always results in an untitled tiddler with only the plugin title inside it.

Perhaps package it as a json file until you "fix" it.

Regards

Tony

On Thursday, July 12, 2018 at 1:07:46 AM UTC+10, Eduardo Granados Gomez wrote:

[TonyM]

Eduardo,

This seems a very promising way to visualise Tiddler relationships, I can foresee ways to do this however I am not sure how to get the diagrams to provide internal or external links on click, and being able to render a caption rather than a tiddler name in such a linke, would also help.

Best wishes

Tony

 

[Scott Kingery]

This is interesting. Is there a way to make lines without arrow heads? I didn't see that in the example.

On Wednesday, July 11, 2018 at 8:07:46 AM UTC-7, Eduardo Granados Gomez wrote:

[David Gifford]

Very nice. Added to the toolmap (https://dynalist.io/d/zUP-nIWu2FFoXH-oM7L7d9DM) as Viz by chanilino - for creating graphs using GraphViz in the section on Tables, charts and graphs.

[Sean Boyle]

It follows graphviz syntax: "digraph" produces a directed graph, and "graph" produces an undirected (no arrows) graph.

[@TiddlyTweeter]

Am I right in thinking this tool just creates a diagram? That the items within it link to nothing?

Just asking.

Josiah

[Sean Boyle]

EXAMPLE:

<$viz text="""

graph B {

rankdir=RL;

   subgraph cluster_a {

      label="subgraph";

      a -- b;

   }

a -- c;

}

"""/>

This also contains a subgraph, in case you should find that useful.

[Scott Kingery]

Thanks, Sean. That's helpful.

I hadn't seen Mermaid until you mentioned it earlier in this thread so I'm looking at that too.

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/uGzzUTS6Fzc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/e034ffa1-f161-4a14-aba0-1d101405ecdd%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Pit.W.]

Hi Eduardo,

great plugin, very intuitive.

Is it possible that the names of the nodes are links to tiddlers?

Thanks again,

Pit.W

Am 2018-07-11 um 17:07 schrieb Eduardo Granados Gomez:

Hello I have create a graphviz plugin. You can see here https://github.com/chanilino/tw5viz. How can I share this plugin with the comunity?

Thanks

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/5de7b077-12ab-4e7c-8ae8-2a6e79133b4e%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

_________________________________________________________________
________________________________________________________
Ihre E-Mail-Postfächer sicher & zentral an einem Ort. Jetzt wechseln und alte E-Mail-Adresse mitnehmen! https://www.eclipso.de

[Danielo Rodríguez]

This looks great and it should be very useful.

Many times I missed a tool like this on TiddlyWiki, now I have one.

Thanks

[springer]

Hello Eduardo / chanilino and all,

I'm chiming in to bump Pit.W's question into view again.

The graphviz plugin is turning out to be pretty fantastic, especially with some stylesheet help. In exchange for a wee bit of layout compromise, graphviz promises on-the-fly editing of diagrams, and would save space on my teaching wiki. (Currently all my teaching-related diagrams are .pngs and .svgs exported from various graphics software tools.)  Although I'm a bit wary of the heavy plugin footprint, I'm leaning toward adopting graphviz... 

The really wonderful thing, as Pit.W suggests, would be a way to get elements of the graphviz diagram to function as links. Is this possible without a total rebuild?

Just for the sake of anyone else with diagramming needs, I'll also comment on some related options:

Currently, it seems the most elegant tool for getting a diagram whose nodes are links is the list tree that twMat made (https://groups.google.com/forum/#!searchin/tiddlywiki/twMat$20tree%7Csort:date/tiddlywiki/BKgNBvsCet0/T9LBbpYFAgAJ) -- but only a small subset of diagrams fits the structural limitations of the "tree". 

From another direction, I realize an svg diagram can be rigged with TW links, but svg-oriented editors aren't so efficient for flow-charts and such. The svg tools that telmiger has set up are awesome.

Meanwhlie, TiddlyMap may be the perfect tool for some folks, too, since the tiddler-connecting links are its heart and soul. For me, though, the sprawly mind-map look is poorly suited to neat hierarchical diagrams and flowcharts. (Also, when I went to install TiddlyMap to see whether it could do hierarchy and ortho lines well, I got red boxes of javacript death. Troubleshooting the conflict, given my constellation of plugins, is a rabbit hole for another day...)

There's also mermaid, available as a plugin. From what I can tell its overlap with graphviz is significant, a bit lighter footprint and perhaps a bit less of what I like about graphviz.... But if someone told me that mermaid diagrams could incorporate links more easily, I'd be instantly converted. ;)

-Springer

On Sunday, July 15, 2018 at 11:52:24 AM UTC-4, Pit.W. wrote:

Hi Eduardo,

great plugin, very intuitive.

Is it possible that the names of the nodes are links to tiddlers?

Thanks again,

Pit.W

Am 2018-07-11 um 17:07 schrieb Eduardo Granados Gomez:

Hello I have create a graphviz plugin. You can see here https://github.com/chanilino/tw5viz. How can I share this plugin with the comunity?

Thanks

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.

To unsubscribe from this group and stop receiving emails from it, send an email to tiddl...@googlegroups.com.

To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/5de7b077-12ab-4e7c-8ae8-2a6e79133b4e%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Ste Wilson]

Don't forget tidgraph
https://ihm4u.github.io/tw5plugs/#Tidgraph%20-%20Easy%20tiddler%20graphs%20for%20TW5

[springer]

Ste,

Yes -- in gesturing towards other diagramming options, I ran the risk of not being comprehensive!

Tidgraph is also great for displaying a hierarchy-tree of tiddlers -- both lightweight and elegant..

Since my main purpose is displaying flowcharts and argument diagrams (nodes usually labelled as sentence-sized bits), and being a link to an existing tiddler has been the exception rather than the rule, I did fail to spend time with tidgraph when it was announced.

It's great that tidgraph can orient to various field relations, in addition to tag-structure. 

If tidgraph could display the text field (or some other field besides the title) for its nodes, and if it had a "North" layout (where multiple things build downward support toward one, rather than one source at top branching into many children), then it would be a very elegant solution for argument diagrams (though still not for flowcharts)... I suppose I could tackle such modifications someday -- but I can tinker only by very slowly reverse-engineering things, with lots of trial and error. (If those capabilities are already there and I didn't notice them, please let me know!)

-Springer

[TonyM]

Springer,

A Few thoughts;

Since a tiddler can be represented by an icon, and wikitext (links) can be used in many places, once we have a set of icons to represent relationships, a form of graphing and linking could be established, then the data contains all the information necessary to be represented in different graphical ways. The advantage of this would be keeping the data organised in a way that keeps it reusable with all the other solutions available on top of tiddly-wiki. For example we can use HTML to a large extent but always replace parts with wiki text and links, this should be possible with many other graphing features. If you retain the tiddler as object and relationships, then all you need is a system to represent the objects and relationships in each graphing system, you could call this a meta function for a given graphing solution to translate tiddlywiki data to each graphing solution.

Regards

Tony

[springer]

Hi Tony,

I'm not sure I follow where your answer is going... Is your suggestion that *graphviz* can be modified so as to show links, or are you simply pointing out that there's no conceptual difficulty in the idea of getting any kind of diagram to supervene on (map neatly onto) tiddler relations? I do understand that "the data contains all the information necessary to be represented in different graphical ways" ... So my question is whether the graphviz plugin (or any other currently available tool) can be readily modified to do that work...

(I also don't quite follow why you place special emphasis on "icons" in your reply? Although icons can represent tiddlers, I don't think an icon can "represent a [particular] relationship" — at least not by itself (except for how an icon can correspond to a *kind* of relation)... Of course icons can be very beautifully used in diagrams, and, when icons can be constrained to be unique, they serve as very compact stand-ins for more complex information...  Yet my own use-case (with hopes pinned on graphviz, for now) is for diagrams that show students how various claims are related through inference-relations..., and icons aren't especially pivotal there.)

Am I missing something about the spirit of your reply?

-Springer

[TonyM]

Springer,

 

I'm not sure I follow where your answer is going... Is your suggestion that *graphviz* can be modified so as to show links, or are you simply pointing out that there's no conceptual difficulty in the idea of getting any kind of diagram to supervene on (map neatly onto) tiddler relations?

Yes, any kind of diagram to supervene on (map neatly onto) tiddler relations? but of course this requires a design component to accompany each diagramming tool

 

I do understand that "the data contains all the information necessary to be represented in different graphical ways" ... So my question is whether the graphviz plugin (or any other currently available tool) can be readily modified to do that work...

Yes, I am asking that same question  graphviz plugin (or any other currently available tool) can be readily modified to do that work,  and suggesting we try and make the answer yes.

 

(I also don't quite follow why you place special emphasis on "icons" in your reply? 

I was perhaps a bit loose with my words here, perhaps iconography, rather than icons is better, Whilst simple lines can be used for relationships, we can have different graphical representations of relationships and whilst these differ according to the graphical system you are using, a basic one would be helpful to represent the tiddlers (objects) and relationships in raw tiddlywiki. Eg line, directional (one to many many to one), broken or loose etc...

Am I missing something about the spirit of your reply?

No you are fairly close, to the spirit of my reply.  

I think my key take home is we need to provide a middle layer, between tiddlywiki and the graph or imaging solutions we have. If we have a robust set of standards any graphical representation can be given a set of macros to interact with the tiddlers to that standard. Most of the standards are already implied we just need to document them.

Regards

Tony

[springer]

Tony,

Super! 

I would be very excited if it were possible to build a graphviz-style result where the graph-building macro grabs a set of tiddler nodes based on some filtered list, and pulls from some field in each tiddler for a list of tiddlers (constrained to the filtered set) with "upstream-relation" to it, and/or draws from some other field for a list of "downstream relations", and perhaps a third field for non-directional relations. (There's some redundancy if there's both an upstream and a downstream field, but that would allow authors to add relations from wherever they notice them, and bidirectional connections could simply result from both directions being indicated, though some folks would want a "two-lane" style for bi-directional connections.)

The most difficult thing to replicate is the way in which diagramming software actually treats the connections as entities with properties (labels, line styles, colors, arrow styles). All the relevant info could in theory be squeezed into the field of one of the tiddlers (for which the connection is upstream, downstream, both, or neither). graphviz also allow for labelled subgraph areas within a larger diagram, and for connections that do all kind of complex things (whether or not incoming connections should "merge" like tributaries before reaching their target), and some tools track priority levels for handling connection lines that might "cross", etc.). Still, if TW could harness something like the "smart" layout engine of graphviz or mermaid while treating the nodes as linkable tiddlers even in an otherwise "flat" diagram, that would be a fantastic beginning.

If the diagramming engine is truly integrated with TW, as you say, it should be easy for the diagrammer to be flexible about what text to display on the graph for each node (title, text, caption, and icon being the most likely). Something like a node-shape field would help for flowcharts, etc... presumably the linkstyle field (from plugin) would automatically help with coloring label text, as well. 

In case anyone is curious, some examples of diagram styles from my teaching site are here: http://ethicsatwes.tiddlyspot.com/#diagrams

-Springer

[TonyM]

Springer,

Very exciting your site of examples.

From my perspective I want to decompose the pieces even further to very basic tiddlywiki. Personally I already use a range of tiddlywiki native representation for connections. Lets say I have a tiddlywiki that documents fruit based recipes and all their relationships. Using tags, link references and back-links, I would favour a way we can use this to generate the data needed for a graphical tool to represent it using its features.  Thus the graphing tool can represent native tiddlywiki relationships. Sure custom tags and special fields can help it along for advance features, but these should be avoided, if they can be implemented in a generic way. For example why could we not get the grapical tool to take the image from the icon field, the color from the color field and a tooltip from a tooltip field.

The simplest approach is to make a graph generator. A Special tiddler that interrogates the raw tiddlywiki structure and translates it into the graphical language for one or more tools to then visualise.

• Just as we have template tiddlers for static html, json, etc.. we should be able to build templates that generate the graphical tools "code language", the only challenging bit is identifying how to do this in a way we can pass titles and wiki text it the desired parts of the graphical representation like links the the relevant tiddlers.

The idea solution would be if such a visualisation system (of raw tiddler relationships) came along side the graphical tool itself. Even better if each graphic tool could come with its own  visualisation system so all tools can represent raw tiddlywiki data and relationships equally well. Such a solution will also be primed to permit further customisation and leveraging the graphical tools unique features, while keeping the data in raw tiddler forms.

I hope this makes sense, I am speaking "conceptual design" here, the details still need work

Regards

Tony