Extension talk:Flex Diagrams

I did some more work on generating mermaid code from Cargo for an org chart. This generated ~1500 lines of code. I ran into two problems. Initially I got an error that there was too much text (sorry I didn't take it down verbatim). I shortened the annotations in my links (which don't show up anyway, btw), and that error went away and I was able to save the mermaid: page. But when I now try to open it from a page with {{#display_diagram:Mermaid:...}} I get a "Syntax error in graph" (even though the page works on the mermaid:... page). I wonder if they use different size string variables or something. So, there are size limitations to this, which is reasonable, the huge graphs aren't very easy on the eyes anyway. But: it would be great to know what the limitations actually are. And I still think it would be awesome if this was able to take query output from Cargo directly - I now have a setup where I manually copy-paste it from Cargo output to the Mermaid page.

I didn't know there were problems with handling overly-large text, with either Flex Diagrams or the Mermaid library itself. What was the initial error message? That would be helpful to know - especially to know whether the error comes from FD or Mermaid.

The error is "Maximum text size in diagram exceeded"; if I paste it into https://mermaid.live I get the same error, so that's Mermaid not FlexDiagrams. A somewhat smaller version of the code will display fine in the mermaid:... page, but not when called with {{#display_diagram:Mermaid:...}}. That one just gives a "syntax error in graph" with that bomb icon, which is what it would do if code was cut in mid command, so I wonder if there is a variable size problem. Debug log near mention of mermaid is

[objectcache] fetchOrRegenerate(global:SqlBlobStore-blob:intmedmw-mw_:tt%3A37700): miss, new value computed
[ContentHandler] Registered handler for flexdiagrams-mermaid: FDMermaidContentHandler
[objectcache] fetchOrRegenerate(intmedmw-mw_:preprocess-hash:880fce3f791fe26f617801db0e5458476e9e8ce4:0): miss, new value computed

Sorry, I missed this before. The caching failure seems unrelated to the syntax error, but I don't know anything beyond that. This may be outside of the ability of the Flex Diagrams code to fix.

So whatever variable type is used for the {{#display_diagram tag is not smaller than the one on the mermaid:... page?

I don't think so... it's the same code that handles display in both places, if I remember correctly.

First of all: Congrats on the 0.4 stable release! Glad to see that this extension is still evolving!

On our local wiki we switched back to using the DrawioEditor extension after running some trials on an earlier version of the Flex Diagrams extension.

Unfortunately, the main points for us dropping Flex Diagrams for the time being still seem to be present in the 0.4 release.

What made us switch back to using the "DrawioEditor" extension (besides it allowing for more than one diagram per page), is that:

1/ Drawio diagrams are fixed in the page once included, where the Camunda BPMN's are not.

By that I mean: When you display a Camunda BPMN diagram in a page and scroll through the page using the wheel on a computer mouse, once the mouse pointer passes over the displayed BPMN diagram, you stop scrolling through the page and start scrolling through the diagram. This was experienced as annoying by the wiki users that I consulted.

This doesn't happen with Drawio diagrams.

Is there some way of switching this mouse hover scrolling off?

2/ Drawio diagrams adapt the image size to the size of the actual diagram, where the Camunda BPMN's just seem to have a fixed image size with small diagrams having a lot of white space around them, or large diagrams being zoomed out (which is actually still fine to a certain point and with a certain screen size).

Is there some way of getting rid of the surplus whitespace for smaller Camunda BPMN's? (without zooming them in to a size that they just fit the seemingly fixed image size)

In general

I do like the idea behind the Flex Diagrams extension better than the DrawioEditor extension, and I for sure prefer the Camunda BPMN editor above the BPMN shapes in the Drawio editor.

I know I'm mixing up 2 extensions, and 2 diagram editors. But in the end, it's the combined package that convinces the users of our local wiki on picking one solution over the other.

For now, the DrawioEditor still has the edge on Flex Diagrams.

Yes. Scrolling page with included BPMN diagram is pain

We managed to get around with this simple script in Common.js:

document.querySelector(".bjs-container svg").addEventListener("wheel",(event) => {

   if(!event.ctrlKey && !event.metaKey) {

     event.stopPropagation();

   }

})

It just checkes when scrolling is detected inside the BPMN-Container if there is the CTRL-Key (Windows) or the Cmd-Key (Mac) pressed. If not, scrolling is aborted (and passed to the «real» page instead).

There is an error with using the Mermaid feature.

An error has occurred”Syntax error in graph , mermaid version 8.13.4"

Found out, I used the new syntax of the Mermaid tutorial, sorry.

The demonstrator for mermaid at https://mermaid.live includes a pan/zoom setting. It would be great if that could be exposed, even as a setting if not as a toggle like that. Right now the rest of the page zooms around the diagram but it remains at a size where it fills the screen, which isn't so great for very large diagrams. To clarify, it's more of a problem for wide graph LR graphs, and less so for tall ones (where scrolling works). (removed example, password protected wiki...)

Yaron, thanks for another excellent extension. I had tried to do data driven diagrams through the mermaid extension a while ago but that was always flaky enough that I stopped. I just set up an example of a Cargo query populating the Mermaid page for a Flex Diagram. It's a bit messy, and it would be nice if this was available as a feature (see also #Feature Request - Diagrams should support SMW/Cargo results.). But, it works, mostly. There are two problems. One is that the page shows as only an error in the diagram edit mode on the diagram page. The other is that when I edit the example page itself, when I preview the code is expanded, but the diagram is not shown. It resolves into the diagram when I save, but in preview it looks like an error. In troubleshooting I also tried to draw the code in from a template instead, but the template doesn't resolve in code either.

Also, the graph doesn't get updated consistently as the data changes. I tried to refresh the graph page, and also the consuming page, but am not getting a graph with updated content as I add data.

It's impressive that you got this working! That is, generating Mermaid syntax from Cargo queries. As you have discovered, though, Flex Diagrams was not designed with this kind of dynamic generation of syntax in mind - which is why there are problems with both previewing and display. It seems to me that it would be better, for this case, to use the Mermaid extension instead - and to place all those #cargo_query calls within a #mermaid call. It's perhaps less efficient, but it will always display the correct data.

I was initially trying to use the Mermaid extension, but it has some showstopper bugs as well. And: you support this one, so I have far more hope that this one gets fixed if it has problems. But I can see where I have come up with an edge case here. Is there, or could there be, a maintenance script that would cause these graphs to update, so I could just run that in a crontab? Or, better yet but probably more work, a Cargo query result format?

Sorry for the delay. And thank you, that's nice of you. I don't know if a Mermaid Cargo result format is really possible, since Mermaid is so flexible - it would be hard to capture all of the options. (I assume that's the same reason why there's no SMW Mermaid format either - though SMW does use Mermaid to display Gantt charts.) Yes, there could be a script that re-saves all of the "Mermaid:" Flex Diagrams pages, which could then be run on a nightly basis or whatever it is. I don't think an exact script like that exists, but it probably wouldn't be that hard to create one. Still, I think the real solution is to fix the Mermaid extension. It's (in theory) such a simple set of functionality that it shouldn't be too hard to get working again...

The option of addding links from the BPMN documentation "Get approval [[BPMN:Approval process]]" does not work in Drawio Get approval [[Drawio:Approval process]] Is there any other way of linking to wiki pages from Drawio diagrams?

Not at the moment - the BPMN linking thing is a special hack. It would be great to add it, though!

Thanks for this Extension.

It would be super cool if links would be possible in drawio!

I just looked into this. My mistake - it turns out that there is a way to add links to Drawio elements! In the editor, right-click on an element and select "Edit Link". However, the bad news is that these links don't actually appear when viewing the diagrams - only when editing them. The URL information is somehow stored in the base64 image data, but I don't know how to get it out. Maybe someone else can shed some light on this.

If I link in a BPMN to a Wiki page it works perfectly.

But is there any chance to see if it links to a page that does not exist?

For example i link to [[Test1]] (which does not exist), can it display that in red before i click on it?

Usage of that: If you create a bigger BPMN or work together with others, and they edit or move a page, and I only look on the BPMN I will think it is still up to date. By seeing that the link is for example red, I could update the BPMN without having to check each link manually everytime.

It would indeed be great to have links to nonexistent pages show up as red, but that feature does not exist yet. Thank you for the suggestion.

What constant names module uses? Can I use it in LocalSettings.php to set aliases?

They're FD_NS_BPMN, FD_NS_GANTT, FD_NS_MERMAID and FD_NS_DRAWIO - and yes.

Can you indeed? Are the constants defined already in LocalSettings.php after wfLoadExtension() is invoked? I don't think so.

You might be right - I didn't really think about that part of it.

FWIW, I just added them to https://www.mediawiki.org/wiki/Extension_default_namespaces

Cavila - thank you! Somehow I forgot to add this extension.

We've included Flex Diagrams and it worked out of the box at a first glance, i.e. I can create any of the four diagram types and embed them in Wiki pages. However I can't edit the diagrams anymore, because the toolbar / Tabs are missing (not displayed?). Opening the Diagram page just shows the diagram as a picture, without any buttons to edit it. If I manually append the URL with "&action=editdiagram", the next page hasn't got any content, i.e. there's an empty box (which should probably contain the diagram in edit mode) and below that another box for the comments / summary for the changes. It does also show a "save changes" button at the bottom...

we're running MediaWiki 1.31.10, php 7.3.11, BlueSpice 3.1.12 in an Univention environment. Our Skin is Calumma 3.1.12, if that helps.

Interestingly, when going to the Diagram page there's already a warning in the browser console that says that our skin is not compatible with the Visual editor, but that shouldn't have any consequence at this stage, could it?

When I append the URL as described above, a warning is added:

VM1417:33

      Uncaught TypeError: OO.ui.MessageWidget is not a constructor

   at Object.success (<anonymous>:33:17)

   at fire (load.php?debug=false&lang=de&modules=jquery%2Cmediawiki&only=scripts&skin=bluespicecalumma&version=04z7l8m:46:617)

   at Object.fireWith [as resolveWith] (load.php?debug=false&lang=de&modules=jquery%2Cmediawiki&only=scripts&skin=bluespicecalumma&version=04z7l8m:47:824)

   at done (load.php?debug=false&lang=de&modules=jquery%2Cmediawiki&only=scripts&skin=bluespicecalumma&version=04z7l8m:126:174)

   at XMLHttpRequest.<anonymous> (load.php?debug=false&lang=de&modules=jquery%2Cmediawiki&only=scripts&skin=bluespicecalumma&version=04z7l8m:129:568)

again, this also includes information about the skin, but at this stage I'm lost unfortunately :-(

OK, after having created an user account and some more testing, I can be a bit more specific. The Tabs not being visible is a question of the visual representation in the skin. Ours (Calumma) displays the menu items in a collapsible side-bar.

I can create all 4 diagram types, However, I can only edit BPMN and Gantt diagrams. When trying to edit Drawio Diagrams, the canvas remains empty as I said before. Apart from the error VM1417:33 cited above are are no other meaningful errors or warnings, apart from ones that are already present before going into edit mode. When inspecting the elements of the webpage (I'm using Edge for that purpose), the canvas just is empty, whilst for the other diagram types this section is full of content.

When trying to edit Mermaid diagrams, I'm getting the following Error message in the Canvas itself:

[72c36dbfb6210cf7eeb9c18b] /bluespice/index.php?title=Mermaid:Testseite&action=editdiagram Error from line 59 of /var/www/bluespice/extensions/FlexDiagrams/includes/FD_SpecialEditDiagram.php: Class 'MediaWiki\Revision\SlotRecord' not found.

For me currently the Drawio diagrams would be the most important feature of FlexDiagrams, which unfortunately isn't working in our configuration. Does somebody have any idea what might be causing the problem?

Best regards

Matthias

Hi - I'm sorry for the long delay. A number of things could be going wrong here, but my strong guess is that at least one problem is the MediaWiki version you are using: 1.31, which is very old. I know Flex Diagrams is billed as supporting MW 1.31 and higher, but it appears that that's not correct: it looks like Mermaid handling has required MW 1.32 or higher since FD version 0.4. I'll have to fix that in the documentation. As for that JavaScript problem you're seeing with Drawio, I wouldn't be surprised if the MediaWiki version is the cause of that one as well.

Thanks Yaron, I feared that might be the answer. I've asked our IT guys to plan an update to our Wiki, but so far haven't got a commitment date yet. I'll give an update once that's sorted.

Matthias

Hello,

I tried using all different types of diagrams and for BPMN, Gantt and Drawio everything works as I expected it. Only Mermaid diagrams were not possible to include in other pages. The diagram itself is there and visible on the diagram page (Mermaid:Test). But when I include this diagram in another page with {{#display_diagram:Mermaid:Test}} it only shows the code text which is used to create the image instead of the picture.

Confusing is also that within the editor the preview sometimes show the mermaid diagram (only if I edit the subsection where the diagram is placed at) but after saving it still only shows the code. When I edit the hole page instead the preview is similar to the output after saving just the code and not the actual picture I would expect.

Did I do something wrong or is this a bug?

Thanks in advance,

Helena