Diagram Application (Pro)

Last modified by Administrator on 2024/12/06 00:01

Diagram Application (Pro)

Create easy to use diagrams and flowcharts using draw.io. Import Gliffy diagrams. Include diagrams in other pages. Export them as PDFs or images. The app can be purchased individually or part of the XWiki Pro package. Try it free.

CategoryApplication
Active Installs61
Rating
0 Votes
LicenseGNU Lesser General Public License 2.1
Minimal XWiki version supportedXWiki 13.10
SourcesIssues

Using the Diagram Pro application

With this application you can edit and view diagrams in XWiki, using the diagrams.net integration.

You can create a big array of diagrams, such as: wireframes, mockups, UML, charts, BPMN, mind maps, tree & network diagrams etc.

Each diagram is stored in a wiki page. The revisions of the diagrams are synched in XWiki.

The app provides intuitive functionalities for both beginners and advanced users. You can:

  • add and edit new diagrams, with a variety of shapes available

    DiagramProApp.png

  • import existing diagrams

    DiagramProImport.png

  • view the diagrams as images attached to wiki pages

    DiagramProAttach.png

  • import diagrams from Gliffy

    Import-Gliffy-diagrams-in-XWiki.gif

  • include diagrams in other wiki pages

To learn more about how to create, edit and include diagrams on other wiki pages please visit the documentation tab

Examples

Create a diagram representing a logical structure

The Active Directory logical structure (objects, organizational units, domains) can easily be explained using a diagram: 

Diagram_Example_ActiveDirectory_OrganizationalUnit_800.png

Other diagram examples

External Resources

FAQ

How to create a new diagram

To create a new diagram click on Diagrams in the Applications panel.

DiagramPanel.png

Click on the Create button, fill in the diagram name and select the Diagram template, then click Create again.

DiagramsHome.png

CreateDiagram.png

Use the editor to create your diagram, then click Save & View.

DiagramEdit.png

DiagramView.png

How to include a diagram in another wiki page

Using the WYSIWYG editor

If you wish to display an existing diagram on another page you should use the Diagram Macro. Go to the wiki page where you'd like to include the diagram. In edit mode, click on the XWiki Macro icon.

DiagramMacro.png

Select the Diagram Macro from the list of macros.

AddDiagramMacro.png

Fill in the path to the diagram you wish to include and click Submit.

EditDiagramMacro.png

You will be able to see the included diagram both in edit mode and in view mode.

DiagramMacroEditMode
Included diagram in edit mode.

DiagramMacroViewMode
Included diagram in view mode.

Using the Wiki editor

If you're more inclined to write code directly, you can write the following directly in wiki mode:

{{diagram reference="Path.To.DiagramPage" cached="true" /}}

How do I zoom in and out a diagram using the macro?

Currently there is the possibility to zoom a diagram in and out, as well as to view it in full screen, right from the page where it is referenced from. To enable this, the "Cached" option needs to remain unchecked when you insert a new diagram macro, as shown below:

EditMacroUncheckedCache.png

DemoZoom.gif

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 do I 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.

DiagramProExport.png

How do I choose between having the diagram as an image or SVG in an XWiki PDF export?

You can choose whether you want to use a PNG in the XWiki PDF export, which will display correctly text elements, or a SVG, that will additionally have clickable text, including links.

To specify this you will need to edit the diagram in object mode and from the exportUsingSVG property, choose whether you want the image-base or the svg-based XWiki PDF export. By editing the pdfImageExportZoom property you can also choose the quality of the image exported.

ExportWithSVG.png

ExportImageQuality.png

To save these changes you will need to save the XWiki page twice. Once in the object mode where you made the edit and then another time in the draw.io default editor, so that the edit is also picked by the /draw.io library.

How do I disable features that require an external server?

If you are extra concerned about privacy, it is possible to disable the features that require an external server:

  • the PDF export performed from the diagram editor
  • the image export on IE11.

You can disable this feature from the Global Administration > Other > Diagrams

AdminDiagrams.png

How do I use draw.io diagrams with Diagram Pro?

From the draw.io editor, export your diagram as a XML file. Then, on your wiki instance, create a diagram type of page, import the XML draw.io file. From that stage, you can continue to edit it or save the diagram page.

Installation Steps

This paid extensions requires XWiki 13.10 or above. In order to install the extension, follow the next steps inside your XWiki instance (on cloud or on premise).

Navigate to the Extension Manager

In the Applications Panel click on "More Applications..." and then "Install new applications...". Alternatively navigate directly to the Administration and select the "Extensions" section.

step1.png

Install the Extension

Search for the extension you wish to install and use the Install button to install it.

step2.png

Get a License

Navigate to the "Licenses" section of the Administration, fill your details, look for the extension you just installed in the live table and click the buttons to get a trial license or to buy a license.

step3.png

Install the License

If you have selected a trial license then you're good and there's nothing else to do. Your trial license is automatically installed.

However if you've selected to buy a license you'll be redirected to a page to perform the payment. At the end you need to come back to the "Licenses" administration section and click on the "Check for Updates" button. This will download and apply the license you bought.

Use the Extension

Start using the Extension! Refer to the extension's documentation to know how to use it.

Installing Paid Apps on Subwikis

If you want to install an application on the whole farm (main wiki + subwikis), you can do so directly from the main wiki’s Extension Manager, as seen below:

step4.png

Extensions can also be installed only on a particular subwiki by global admins. Subwiki admins will not be able to install these extensions due to their limited rights.

Options

The price is per year and varies depending on the support level and the number of users.

Support / Users 10 25 50 100 250 500 1000 2500 5000 10000 20000
Silver
Diagram Application (Pro) is part of the XWiki Pro package. Purchasing this package you will benefit from more extensions at a better price. Check the full offer in XWiki Pro! The Diagram Application (Pro) can be purchased individually only via online order (credit card payment), following the “How to Buy” procedure described below. The application is part of the XWiki Pro package, which can be purchased through manual order (bank transfer payment) by contacting sales@xwiki.com.

Benefits

What do you get when you purchase an XWiki extension?

1 year license

By purchasing an XWiki extension license, you'll benefit from it during one year.

Free updates

You benefit from all the extension updates during one year. You are always up to date.

Support included

If you are facing an issue, you can reach the XWiki support. Our team is always available to help.

How to Buy

To buy, install this extension from inside your XWiki instance and follow the instructions.

Release notes

v1.20.6

Bugs fixed:

  • #279 Warning message when creating a diagram from an existing page using the {{diagram/}} macro

v1.20.5

Bugs fixed:

  • #262 Current page is not visually selected on opening a diagram
  • #264 The translation key is visible in the macro description
  • #267 Saving imported draw.io file fails
  • #271 Can't save the XML diagram imported from Device
  • #275 Duplicating content brokes the editor

v1.20.4

Bugs fixed:

  • #260 Only the first page is displayed when using the multiple pages feature

v1.20.3

Improvements:

  • #250 Enable the multiple pages diagram feature

v1.20.2

Bugs fixed:

  • #259 Freehand mode not working

v1.20.1

Upgrades:

  • #256 Upgrade Licensor dependency to version 1.25

v1.20

Improvements:

  • #252 Use temporary attachments when saving a diagram

Bugs fixed:

  • #253 Diagram cannot be properly integrated with Change Request

v1.19.4

Bugs fixed:

  • #228 Mermaid import not working

v1.19.3

Upgrades:

  • #249 Upgrade Licensor dependency to version 1.24.3

v1.19.2

Bugs fixed:

  • #248 Image path migration is not working if the drawio webjar version contains a - 

v1.19.1

Bugs fixed:

  • #234 Confusing display of the current link in the "edit link" UI 
  • #238 Caching problems after version upgrade.
  • #243 Can't import a Gliffy diagram.

v1.19

Tasks done:

  • #223 Upgrade draw.io to the 20.5.0 version.

v1.18

Tasks done:

  • #235 Upgrade parent to 13.10.
  • #236 Create XIP module.

Upgraded licensing version to 1.24.1.

v1.17.3

Bugs fixed:

  • #210 Errors after creating and when trying to save diagrams on mobile
  • #226 Store SVG as attachment migration is not working if the free aplication was previoustly installed

v1.17.2

Bugs fixed:

  • #219 Cannot modify diagram title in diagram editor

Update the Licensing dependency version to 1.22

v1.17.1

Update the Licensing dependency to version 1.20

v1.17

Bugs fixed:

  • #182 Some shapes aren't visible in the left panel 

Update the minimal supported version to XWiki 11.10.
Update the Licensing dependency to version 1.19.

v1.16.2

Bugs fixed:

  • #199 SVG import is not working anymore

v1.16.1

Bugs fixed:

  • #185 Diagrams are not shown on print preview
  • #192 Disable the real-time synchronization and notification draw.io features until we properly integrate them
  • #193 Problems with updating diagram content when paths of linked pages exceed 255 characters

v1.16

Bugs fixed:

  • #179 On page print via Ctrl+P, diagrams do not get resized to page width in Chrome
  • #186 No error is shown to the user when saving the diagram as SVG or PNG fails.
  • #187 Diagram missing shapes in View mode.
  • #189 Can't export diagram as PDF - Error "MAX_AREA is not defined".
  • #190 Add extensions components in the descriptor.

Upgrades:

  • #176 Upgraded draw.io library to version 14.4.3.

v1.15.5

 Bugs fixed:

  • #175 PDF export from a diagram page in edit mode is exporting the Draw.io logo instead of the requested diagram.

v1.15.4

Improvements:

  • #104 Improve the hint of the Export URL configuration property

Bugs fixed:

  • #172 Create Diagram page from template doesn't work anymore.

Upgraded Licensing dependency to version 1.16.1

v1.15.3

Bugs fixed:

  • #163 Text position is changed in XWiki PDF Export.
  • #170 Error in EM while upgrading on farm the application, leading to unapplied migration.

v1.15.2

Bugs fixed:

  • #151 Updating links after renaming a page only works for the first link when the text is separated by "Enter"
  • #168 The diagram editor doesn't load when strict mode is used (XWiki 12.7RC1+)

v1.15.1

Bugs fixed:

  • #137 Can't add links in IE 11
  • #153 Adding multiple styles to a text element breaks the text display in XWiki PDF Export 
  • #156 Duplicate result when using copy paste to pick elements from an existing diagram to a new one

v1.15

New features:

  • #105 Add support for disabling the features that require an external server

Bugs fixed:

  • #144 Can't save diagrams with text inside certain shapes
  • #158 Editor is not loading in IE 
  • #160 Diagram are not well saved when contains an Actor shape 

Upgraded Licensing dependency to version 1.16

v1.14

New features:

  • #154 Add support for importing Gliffy diagrams

v1.13.2

Bugs fixed:

  • #118 The content in the "Text" shape isn't showing in XWiki PDF export when there is text separated on different rows by Enter 
  • #121 Embedded attached images are not displayed when viewing a diagram from another page via the "display" macro 
  • #148 Diagram installation remains on hold on a XWiki Cloud instance

v1.13.1

Bugs fixed:

  • #36 When renaming a diagram, the reference from the diagram macro is not updated with the new name
  • #131 The SVG isn't exported by default when doing a PDF export, although the property is in place
  • #134 Can't "Save & View" a diagram on IE 11
  • #135 No PNG or SVG is created while Saving a Diagram on IE 11
  • #138 Links in the SVG of the diagram are not updated when the linked page is moved/renamed, for XWiki versions 11.10.3, 12.0

v1.13

New features:

  • #102Add support for choosing between SVG-based and image-based PDF export per diagram.

Improvements:

  • #103Add support for generating a higher resolution diagram image for PDF export.

Bugs fixed:

  • #93 SVG attachment not saved on first Save & View.
  • #110 Links in the diagram content are not updated when the linked page is moved/renamed.
  • #116 XWiki PDF export should demarcate lists elements between one another.
  • #124 Uncached diagrams are not properly displayed in the WYSIWYG editor after they have been inserted.
  • #129 Text not marked as containing link to another page/website in XWiki PDF export.

Upgrades:

  • #97 Update parent version to 9.11.

v1.12.3

Bugs fixed:

  • #101 Text links aren't showing in XWiki PDF export
  • #111 Internal links added to a text are not present on the generated svg 
  • #113 Partially styled elements from a paragraph are not correctly shown in XWiki PDF export
  • #117 Diagram print dialog box is attached to the XWiki page and not the diagram modal box

v1.12.2

Bugs fixed:

  • #94 The link to a wiki page isn't working in PDF export, from Diagram Menu
  • #100 "Textbox" shape isn't showing in XWiki PDF export
  • #107 Links with heterogeneous inner styles are not entirely clickable
  • #108 Inserting a link in full screen mode is not possible

v1.12

Bugs fixed:

  • #87 Wiki links in PDF generated by the FOP export are relative
  • #90 Cliparts aren't showing properly after upgrade from 1.10 to 1.11
  • #88 The link to a wiki page added on a text isn't working in Print Preview

Upgraded draw.io library to version 12.3.3.

v1.11

Improvements:

  • #30 Make the PDF and image export server configurable
  • #86 Save image attachments in the diagram source using their reference instead of their URL

Bugs fixed:

  • #85 Wiki page links don't work in print preview
  • #84 PDF export from the wiki page menu is not working if the diagram page doesn't have the diagram thumbnail attachment
  • #81 Cannot create a new library or open an existing library from browser
  • #61 PDF export from the diagram editor doesn't include images
  • #22 Clipart images are missing from the PDF export

Upgraded draw.io library to version 12.2.7.

v1.10

Bugs fixed:
#80 Dialogs show unrequired scrollbars
#25 PDF and XML export shows an unrequired scrollbar
#23 Exporting Diagram as VSDX (beta) leads to a loading icon that remains stuck

Upgraded draw.io library to version 12.0.0.

v1.9

Bugs fixed:
#11 Paths to images inserted into diagrams become invalid at upgrade
#72 Print preview feature doesn't display Diagram
#73 Issues with inserting links to wiki pages
#75 Diagram element is moved away from its position when colored 

Update the Licensing dependency to version 1.14.5.
Update Default Page Template application dependecy to version to 1.4.

v1.8

New features:
#32 Add support for zooming the diagram in view mode
#63 Add support for viewing the diagram in full screen mode
#64 Add support for inserting links to wiki pages

Bugs fixed:
#27 Importing a diagram from URL doesn't work properly
#59 Sometimes an error message appears when saving the diagram
#68 The diagram is not loading after clicking on a tab and refreshing the page

Upgrade to draw.io 11.2.9

v1.7

Improvements:
#33 Store images as attachment
#47 Fix several French translations
#53 Hide 'Export as HTML' submenu

Bugs fixed:
#9 Unable to save a Diagram once you've inserted a large image "400: Unable to parse form content" in a diagram
#16 Scroll bar is displayed although the shapes are inserted within the paper size boundaries
#21 Clicking on "More results" redirects the page from Edit to Preview mode
#24 "Export as URL" is not working
#28 Migration request appears for some newly created diagrams
#29 Diagram page PDF export does not contain the diagram
#34 Migration script: execute only if there is a valid license
#37 The link to a Diagram text is not saved in view mode if you don't click outside the text element before saving the Diagram page
#38 Undefined translation key when the licence of the diagram app is not valid
#39 Error displayed when no license is added
#40 Diagram is not displayed
#49 Saving the diagram takes to long after several changes made

Update the Licensing dependency to version 1.14.2.

Updated translations

  • French

v1.6.5

Update the Licensing dependency to version 1.13.8.

v1.6.4

Update the Licensing dependency to version 1.13.4.

v1.6.3

Update the Licensing dependency to version 1.13.3.

v1.6.2

Bugs fixed:
#18 Create a migration script for diagrams affected by #11

v1.6.1

Update the Licensing dependency to version 1.13.2.

v1.6

Improvements:
#13 Diagram template is not preselected when creating a new entry

Updated translations

  • French

v1.5.2

Bugs fixed:
#15 If you install XWebIDE Application you can't use "W" letter in the diagram text

v1.5.1

Bugs fixed:
#12 Pages created by the Diagram app should use the plain syntax.

v1.5

Upgrade to draw.io 8.9.9
Fix the export of external images.
Fix the "Import from > Browser..." form.
Diagram names that start with L don't cause problems anymore.
Remove the language picker.

v1.4.3

Update the Licensing dependency to version 1.13.

v1.4.2

Update the Licensing dependency to version 1.12.2.

v1.4.1

Update the Licensing dependency to version 1.12.1.

v1.4

Improve the message displayed when there is no valid license.
Update the Licensing dependency to version 1.8.

v1.3

Initial paid version.

Extension details

This information is only displayed to Administrators. Your users can't see this tab.

License

  • GNU Lesser General Public License 2.1

Sources

Issues

Type

  • xar

Developed by

Compatibility

  • Requires XWiki 13.10 or above.

Installable with the Extension Manager

Dependencies

  • com.xwiki.licensing:application-licensing-licensor-api 1.26
  • com.xwiki.diagram:application-diagram-api 1.21
  • org.xwiki.platform:xwiki-platform-sheet-ui 14.10
  • org.xwiki.platform:xwiki-platform-administration-ui 14.10
  • org.xwiki.platform:xwiki-platform-rendering-macro-velocity 14.10
  • org.xwiki.rendering:xwiki-rendering-macro-html 14.10
  • com.xwiki.defaultPageTemplate:application-defaultPageTemplate 1.4.1
  • org.webjars:requirejs 2.3.6
  • org.webjars:jquery 3.6.0
  • org.xwiki.contrib:draw.io 20.5.0