DokuWiki plugin Diagram

May 7, 2009
DokuWiki plugin

Today a new plugin for DokuWiki documentation system was released. This wiki-syntax extension module allows you construct diagrams and family trees. A text representation of such diagram could be easily read and modified. More info is available on the project page.

This plugin was written in 2007 when we are needed to create a system of biographies of our relatives and include all family trees. Today it's well suited for our needs. The latest version is stable and is compatible with the latest stable DokuWiki release. You can leave questions and suggestions in this topic or send them by email.

Nikita Melnichenko.

Comments

onn
12.07.2009, 05:36

Your plugin is quite a great idea!

I'm thinking about using it to illustrate procedure diagrams at my uni. Hence the questions are:

1. Would it be possible to color the diagram boxes?

2. Would it be possible to have arrowheads?

Nikita Melnichenko
13.07.2009, 20:42

1. It's easy to add border color and background color options. I've added this feature to my todo list. BTW, if you want to color the text within a box you can use the Color plugin.
2. Arrowheads are complicated. This is because of the way the diagrams constructed. I think it's possible but I need time to find a good solution for that.

Nikita Melnichenko
24.07.2009, 23:34

Colored blocks have been implemented.

onn
03.08.2009, 04:23

Great thanks, it works! :)

Neil Gregory
05.08.2009, 15:45

Great Plugin, how best to implement Line Feeds to increase the line spacing between unconnected blocks.
' \\ ' doesn't work between lines in the <diagram> block.
Need
| AAA | - | BBB |
\\
\\
| CCC | v | DDD |

Also would be great lif Right and left bounded text rules akin to tables could be implemented in some way?

Thanks

Neil Gregory
05.08.2009, 15:50

Whoops, kept on trying and could answer my own question.
|
seems to deliver what I need for the spacing. Now just need the right and left aligning solution?

Nikita Melnichenko
05.08.2009, 19:48

Neil,

I'm glad that you have found how to increase a space between blocks. I'll add this case to documentation.

Alignment is definitely an external property of the block. It's like a color. I think it will be implemented very soon in the same way.

Alfredo
14.09.2009, 14:50

It'd be nice to add oriented arrows to the different drawings available to link togheter the boxes of the diagram. This way it'd be possible to draw some kind of flow diagramas. I think it could be quite easy to add some more drawings and the new sintax needed to use them.

Nikita Melnichenko
15.09.2009, 16:43

Alfredo,

connection lines are not drawings. They are borders of HTML table cells. It's not so easy to add arrows as it seems. We need special table cells that would contain arrow images and they should not break the whole layout. Syntax is another problem. I don't want to spoil a simple view of diagram structure. I plan to use two or three symbols to combine current patterns with arrows (you can try to count a number of combinations if you think that one symbol is convenient and sufficient).

I keep in mind that this is a most wanted feature but I have a lack of free time now, sorry.

onn
09.11.2009, 14:06

There may be easy solution to arrowheads.

You may operate on the background of cells that are adjacent to the line where the arrowhead should be, and set a half-arrow in the background to the left and a half-arrow in the background to the right.

Nikita Melnichenko
09.11.2009, 20:42

Yes, I also came to this idea earlier but I don't like the case when dash line prevents that arrowhead to be solid. So I decided that the net of cells should be more complex and contain special cells for arrowheads.

Anyway I will hardly do it until New Year holidays because of annual reports. So if someone wants to help (to implement this feature in any way) - patches are welcome! :)

Nikita Melnichenko
29.11.2009, 01:06

Good news for those of you who awaits for arrowheads support. Today I finished a prototype that helped me to find the best hypertext markup for this feature. Take a glance how it will look like:

Prototype: diagram with arrows

So an element of uncertainty has gone and all I have to do is to find some time to write the code. Stay tuned!

Harald
06.01.2010, 13:34

Hi, very cool plugin.

But i having problems on dokuwiki latest (25.12.):
Its not displaying any content when using a=b syntax:
e.g.:
<diagram>
| | | Dad |y| Mom | | |Dad=Daddy|Mom=Mommy|
| |,|-|-|-|+|-|-|-|.| |
| Sys | | Me | | Bro |Sys=Syster|Bro=Brother|
</diagram>

only "me" is filled, but all boxes are drawn ..

Harald

Nikita Melnichenko
07.01.2010, 00:06

Harald,

Thanks for report! I'm going to upgrade my dokuwiki installation to the latest version soon. Then I'll try to fix this issue.

Louis
08.01.2010, 17:59

Harald,

I think your problem come from the last pipe you put on your lines.

e.g.:
| | | Dad |y| Mom | | |Dad=Daddy|Mom=Mommy| <--

instead of

| | | Dad |y| Mom | | |Dad=Daddy|Mom=Mommy

Nikita Melnichenko
08.01.2010, 23:25

Nope, Harald's example works for me on DokuWiki-20090214.

Andrew Dinsmore
11.01.2010, 09:39

I tried the plugin on the Lemming release of Dokuwiki. I used the examples on the plugin homepage to test and found that the Kennedy tree did not fully render on my installation.

The expanded references at the end of the row (when viewing the php) seems to be tripping up the page, unless a link is involved. Then everything seems to work great.

P.S. Very excited about the arrows.

Nikita Melnichenko
12.01.2010, 01:54

I've published a bugfix release tonight. Try to update and tell me if you still have troubles.

BTW, the problem was concerned not only with a new DokuWiki release but also with PHP version 5.3.

Andrew D.
12.01.2010, 09:58

The update works. I tested it on my 214b release and the Lemming release and both work with all the examples I am using.

Thank you. I look forward to using the plugin.

Thomas
18.01.2010, 12:34

Hello

I like your plugin. At the time, the wiki syntax does not work inside the diagram boxes right? Is it possible to add this feature, so that I can put for instance images into it or format the text?

Thanks,
Thomas

Nikita Melnichenko
18.01.2010, 15:06

No, this feature is available from the initial release. You should use abbreviations to specify wiki code. Please, read the docs carefully.

Nikita Melnichenko
07.02.2010, 23:58
Read about version with arrows support. Please, leave comments regarding that experimental branch there.
Fabian
17.03.2010, 17:15

is it possible to have circle or diamond instead of square box?

it would be a great flowchart plugin with revisions.

Nikita Melnichenko
17.03.2010, 23:29

Fabian,

currently it's not possible. I plan to add support for round corners in future releases.

As for complicated borders such as parallelograms, circles or diamonds - I really don't know a good implementation for that within the scope of XHTML+СSS. If you have an idea, post it here. The example of such a diagram is even better (you can modify one of generated diagrams by hand to show your idea in action). Send me examples by email, don't post them here.

It's a very interesting problem and maybe someone will help to solve it some day...

Christian
15.04.2010, 14:41

Great Plugin!
Thanks a lot!

But there are two things I want to know:

is there a possibility to write text without border, for example text under arrows for a legend or further discription

and second
is there a possibility to expand a box over more then one row although there is only one single word in the box, maybe with spaces as placeholder

Nikita Melnichenko
15.04.2010, 19:57

Christian,
currently the plugin can't do what you want. However these features look useful to me and I'll try to implement them in one of future releases.

Tobias
06.07.2010, 20:06

Hi Nikita,

this is really what I was looking for, so great work!

One question (I'm new to Dokuwiki and PHP...):
I would like to generate a family tree out of the data from a database. For the visualization I would use your plugin. Is there a possibility to generate the table definition in my own plugin and feed it to your diagram plugin. Something like:

<diagram>
<my_substition_plugin>
</diagram>

It doesn't work "out of the box" so far, but do you thing this is technically possible?

Thanks in advance and again for that great plugin.

Best regards
Tobias

Nikita Melnichenko
14.07.2010, 23:42

Tobias,

you can write a plugin that generates a table and passes it through the diagram plugin internally, so you just need to write:

<my_substitution_plugin>

The same trick is used in my plugin when block content is generated. Take a look!

Tobias
15.07.2010, 23:10

Hi Nikita,

thanks for your help. I have spent a lot of time trying to understand the code of your plugin. Could you give me a hint at which position you use the trick you mention?

Best regards
Tobias

Nikita Melnichenko
02.08.2010, 23:52

Tobias,

sorry for the delay, I was on holiday. Please, write me email, and I will answer your questions about my code. Thanks.

Emmanuel REMY
01.10.2010, 14:16

An awesome dokuwiki plugin, original. Really. A big work with quality.
Congratulations

Graham
14.01.2011, 14:57

Has anyone come up with a way of adding text next to arrows but not inside boxes? I'd like to use this plugin to create a simple flowchart with the words "Yes" and "No" next to arrows coming out of different sides of boxes

joemouth: wiki links possible?
06.11.2011, 15:53

Hi,
could it be possible to enable links in the boxes?
Then I could use it to visualize workflows with link to description pages for each box.

e.g.:
<diagram>
| [[http://www.google.de]] |-| [[:start]] |
| |:| | | | | |
| |L|~|~| CCC |
</diagram>

joemouth: wiki links are possible!
06.11.2011, 19:40

I can answer my own question.
After complete reading of the very good documentation, I found:
.....you should consider letter sequences as abbreviations and decode them at the end of a line using the equal sign and `|' symbol as a separator.....

<diagram>
| AAA |-| BBB |AAA=root|BBB=1<sup>st</sup> branch (see [[wp>Branch]])
| |:| | | | | |
| |L|~|~| CCC |CCC=2<sup>nd</sup> branch\\ **(very important branch)**
</diagram>

Patrick Michel
23.11.2011, 15:10

Hi!

I like your plugin very much, good work!
There are of course many things one could still want, like colored lines, etc. but I am not going into this, as your are not here to satisfy our every needs ;-)

I want to instead give you some feedback on minor tweaks I did myself:

- I am using a dark style, which doesn't really work with your defaults :-D So I replaced the 'black' color references with '__text__', that way the box colors, etc. will be automatically right. The arrow heads are a different matter though.

- To get white arrows I inverted all the images and placed them in a corresponding 'white' folder and changed the CSS sheet. I just want to point out, that while they are not looking as nice as yours, there is a way in CSS to do triangles. This would solve the "automatic" style adaption, as the arrow heads would then be colored by CSS. They would also scale better when zooming in.

- Last but not least I wanted to have mixed border colors. So I implemented a quick (and dirty) fix to allow the notation 'border-color:red/green'. I can send you the relevant snippet of my changes, but I am sure you could do a better job with that anyway :-D

I am simply exploding the $value with '/' and then set the top/left border colors with the first color and bottom/right with the second.

Thanks again for a great plugin!

Nikita Melnichenko
30.11.2011, 22:46

Hi Patrick,

Thank you very much for your feedback!
1. I totally agree about dark style. Your solution is quite right. I'll include it in the next release.
2. My plan is to give users an option to specify arrow style, default style for blocks, etc. and this would be specified within the opening 'diagram' tag. The CSS arrows would be great, however it's not evident how to do that without breaking the whole layout. I would appreciate if you could give me a hint or even a prototype in HTML + CSS with some simple diagram.
3. Yeah, style options should be extended. Your fix for border-color is good, nevertheless I try to stick with CSS-like syntax. This is on my todo list.

Micha
22.12.2011, 22:00

Try to set up this with the latest DW (Dokuwiki) »2011-11-10 "Angua"« and get the structural-layout without any lines.
Find out that the css isn't load, so my quick-and-dirty solution was to copy the content of the included style.css into my userstyle.css and now it works again.
Tested with the Kennedy family tree and all other example on that page.

Additionally, while im hover any row's in the DW, the background-color is changed (as default by Dokuwiki?!). So I fixed this with
<code>
.diagram * tr:hover td
{
background-color:#FFF;
}
</code>

Maybe you know a good solution to fix this in the next release, like the colored background tabledata's, which are not influenced by the hover effect.

Thanks for share the plugin with us.
(sorry for bad english)

Nikita Melnichenko
25.12.2011, 16:58

Micha,
thanks for reporting about plugin issues in the latest DokuWiki. I haven't upgraded yet, but I'll take a look in the very beginning of the new year.

Jacqui
11.01.2012, 17:53

It should look very great. But for us or for some reason we cann't see the basic connections, none. We see boxes, the arrows but not the lines. Any idea why?

Nikita Melnichenko
12.01.2012, 12:30

Probably, you're using the recent release of DokuWiki (2011-11-10). This plugin is not compatible with the release yet, sorry. I'm going to take care of that in a couple of weeks.

Nikita Melnichenko
16.01.2012, 14:34

I have tried the recent release candidate 2011-11-10 "Angua" - it really have some caching issues, if plugin is installed manually. Try to drop the cache by visiting this page in a browser: <your-dokuwiki-path>/lib/exe/css.php?purge=true.

I can't reproduce hovering issue, the default template renders diagrams out of box. Probably, you should contact template maintainer, because it's bad practice to provide global style for common elements. However, Patrick Michel's notes about dark styles are right, and this would be included in the next release of the plugin.

Tuttu
14.12.2012, 20:58

Hi !

I have tried your plugin on the last version of Dokuwiki (Adora Belle).
It works great but a grid is displayed. It is formed by the table cells borders. Dokuwiki has probably updated the way tables are rendered and a simple "border:none;" inside "table.diagram td" can fix it. :)

Matt
17.12.2012, 00:58

I just installed this plugin. It is great but one cannot see the dotted lines because the image contains a grid in the background. Is there someway to turn this grid off and not have it in the generated image ?

Nikita Melnichenko
17.12.2012, 12:38

I haven't tried the recent Dokuwiki version yet. I'll release updated version of my plugin as soon as possible.

Tuttu, thanks for your suggestion! :)

data
27.12.2012, 00:35

Hi Nikita,

thanks for thies nice Plugin.

Sadly, i haven't lines in the Chart (DW Adora Belle).

For repair i change the Line 5 in style.css
from
border-collapse: separate;
in
border-collapse: collapse;

That works fine. But, it's correct?

cu
data

Nikita Melnichenko
27.12.2012, 12:07

Hi data,

Which browser do you use? Also provide a version, please. I've tested the plugin on Firefox-10 and Chrome-22 with Adora Belle release. You see, Firefox has a bug with cell borders when you use border-collapse: collapse; but with border-collapse: separate; everything seemed to be fine. Please, provide your diagram too. Thanks!

Neil Miller
26.04.2013, 22:28

Hi Nikita,

Just wondering whether you have thought about adding hyperlinks to the diagram objects?
This could, perhaps, be useful to users of the wiki, to allow them to click directly on objects and take them to the wiki page that talks about that object?
And so on if that destination page has its own diagram referencing other objects.

Thanks

Nikita Melnichenko
15.05.2013, 00:14

Hi Neil,

When you say diagram object, do you mean diagram blocks or diagram itself? I'm not really following your idea. Could you give me a real-life example?

It's not hard to add id attributes to diagram and blocks, however there should be defined a good algorithm for generating these references, so they will not be conflicting with references to other blocks and diagrams.

Add comment

Text will be published as is. No HTML allowed. key