How to create diagrams in XWiki

02 Sep 2019 5 min read
Written by Silvia Macovei, Head of Cloud Business

Article updated on 12 February, 2020.

Diagrams are great for easily conveying ideas in a visual manner. They’re useful for both communicating the big picture and breaking down complex concepts.

With the right tool, diagramming becomes easy. The XWiki Pro Diagram app provides a clean user interface, based on the jgraph/ integration. is a web-based open source diagramming software for creating wireframes, mockups, UML, charts, BPMN, mind maps, network diagrams and much more.

Using the app you can edit and view diagrams straight in your wiki. Each diagram is stored in a wiki page. The revisions of the diagrams are synced in XWiki. The app provides intuitive functionalities and is perfectly suited for both beginners and advanced users.


By using this tool you will be able to:

  • add and edit new diagrams
  • import existing diagrams
  • include diagrams in other wiki pages

Starting with the 1.7 release of the Diagram Pro Application you get improved PDF exports of diagrams. Additionally, images inserted in a diagram are now stored as attachments on the diagram page.

To try the app you can install it directly from your instance using the Extension Manager. The best part is that you won’t have to spend hours learning how to use it. You only need a few minutes to master the basics.

If you're already an XWiki customer, starting with our Silver plan you have free access to the whole set of XWiki Pro apps, including the Diagram Application. Please get in touch with our support team and they will send you a free license.

Stay tuned for our next release which will bring support for XWiki links inside diagrams exported to PDF, as well as zoom buttons in view mode.

Finally, you can also get a taste of the app with this one minute video:


Does the Diagram Pro Application support Gliffy diagrams?

The Diagram Pro Application support Gliffy starting with the version v1.14.

How to print a diagram?

Use the menu from the edit mode of the Diagram page to print (option available from File). You will notice a pop-up with print options and at this step you can choose to preview in browser how the printed diagram would look or you could select to print it. You have the option to print using a connected printer or to save the file as a PDF.

How to export diagrams as PDF or images?

From the File menu section click on Export as and then select the desired option. With the Advanced option you can customize the look of the exported diagram in terms of background, width and height, name, format, zoom, dots per inch (dpi) or border width.

You may also be interested in: