draw.io for Confluence Cloud Example Prices

draw.io for Jira Cloud Example Prices

Atlassian announced the End of Life for Server.  It will now be up to you to decide on the best course of action regarding your transition from Server to Cloud.  Over the next few months (or years), many users, just like you, will be trying to make the exact same decision.  This process will continue to open up the dialog of data safety and security even more.

Atlassian had already been focusing more and more on the Cloud-hosted version of their products and that means the security of apps integrated with Atlassian products has been and will continue to be a priority.

Our priority here at draw.io is to give you the relevant information so you can make informed decisions moving forward.

Diagrams help you visually plan, debug problems and explain solutions quickly and clearly. This is why it makes sense to be able to attach and display them in your Jira Cloud issues.

Here are some situations where diagrams help you understand the information quickly.

• Existing infrastructure diagrams on a network upgrade or troubleshooting issue.
• Existing software UML diagrams to issues for new features.
• Flow chart explaining the steps to resolve a customer’s problem.
• Proposed layout of a conference floor to an event planning issue.
• BPMN diagrams on any issues raised to improve business processes.

Add diagrams directly to Jira issues

Jira administrators: Before any diagram can be added to a Jira issue, an administrator must install the draw.io app in the Jira Cloud instance.

Instead of pasting in an image of your draw.io diagrams into an issue description, the draw.io app for Jira Cloud lets you embed diagrams in issues in three different ways:

• Create a new diagram and store it in the issue itself.
• Add a diagram from OneDrive, GoogleDrive or local hard drive.
• Embed (and synchronize) a diagram from Confluence, Google Drive, OneDrive or from URL.

If you choose the last of the three options, you won’t be able to edit the diagrams within the draw.io for Jira app. Any changes you make to the diagram file stored in Confluence, Google Drive, or OneDrive will automatically update the embedded diagrams in Jira issues.

You can embed diagrams from Google Drive and OneDrive into Confluence Cloud. A single diagram stored in your cloud storage platform can be embedded in multiple places – multiple Jira Cloud issues and Confluence Cloud pages – and automatically updated.

By default, the icon is not displayed to keep your Jira issues as uncluttered as possible. Once you have used one of the three options mentioned above, the draw.io icon will appear beneath the issue title.

Embed or add a new diagram to a Jira issue

Clicking the draw.io icon opens the diagram section of your Jira issue (right underneath the attachments and issue description). From now on, you can also use the draw.io menu to add a new diagram, or embed an existing diagram.

1. If you decide to store the diagram file in the Jira issue, click on Add diagram.
2. Create your diagram in the draw.io editor. When you save your diagram, you’ll be prompted to provide a filename.

Your diagram will be added as an attached file to the issue, and the draw.io Diagrams section will show it as a thumbnail. Click on the diagram thumbnail in this section to view it in the lightbox, or hover over the thumbnail and click on the pencil icon in the toolbar to edit the attached diagram.

Embed a diagram stored in Confluence Cloud, Google Drive, or OneDrive

1. Click the Embed Diagram button in the draw.io Diagrams section.
2. Select the Confluence, Google Drive, or the OneDrive tab. If you haven’t allowed draw.io to access your files on the platform you selected, click the blue Authorize button, and follow the prompts to allow access.
3. Click Choose, search for and select the diagram you want to embed in the Jira issue.
4. Check that the preview is of the correct diagram and click Submit.

Similar to how a draw.io diagram is attached to the issue, an embedded draw.io diagram adds an attachment specifying where the embedded file is located. A thumbnail will appear in the draw.io Diagrams section. Click on this thumbnail to see the diagram in the lightbox.

See which diagram is embedded and which is attached: When you hover over the thumbnail, the lack of the pencil edit icon in the toolbar shows you that the embedded diagram can not be edited from within Jira Cloud.

Get draw.io for Jira Cloud from the Atlassian Marketplace

The draw.io app for Jira is one of the highest rated apps on the Atlassian Marketplace, and is available for Jira Cloud, Jira Server and Jira Data Center.

Note: Embedding diagrams from the OneDrive and Google Drive cloud platforms is a feature available in draw.io for Jira Cloud.

As an administrator, you can customise draw.io in Confluence Cloud to make it easier and faster for your users to create diagrams by making custom shape libraries, templates, and plugins available by default.

You can also customise default colours, style palettes, fonts and even the draw.io UI in Confluence Cloud.

Directly go to:

• Custom shape libraries

• Custom templates

• Custom default draw.io plugins

Custom shape libraries

Custom shape libraries let you add the shapes, images, clipart, groups of shapes, custom shapes, and even entire diagrams to your own shape library to make diagramming faster and easier.

If an entire team needs to work with the same shape library, you can add it to the draw.io Configuration section of your Confluence Cloud settings.

2. Go to the Custom Libraries tab in the draw.io Configuration section of your Confluence Cloud settings, then click on Add Library.

Now users can open the shared custom library you just stored in Confluence Cloud.

Set shape libraries to open by default

As an administrator, you can also set which shape libraries are opened by default by adding a line to the draw.io configuration.

1. Go to the draw.io Configuration section in the Confluence Cloud settings.
2. Edit the JSON code to include the defaultLibraries option and list which libraries you want to open by default.
3. If you want to have a custom library open by default, add the defaultCustomLibraries option and list the libraries in the same way.
   { "defaultLibraries": "general;uml;entity;",
"defaultCustomLibraries": ["marketing", "infographics"], }

Custom templates

Create libraries of custom template diagrams for different purposes – floor plans for HR, infographic foundations for marketing, BPMN layouts for internal documentation, UML representations of existing databases or code for developers, etc.

Custom templates are stored in the draw.io Configuration section of your Confluence Cloud settings.

Share custom templates in Confluence Cloud

3. Add your template diagrams to this new page and save it.

Custom default draw.io plugins

draw.io plugins add extra functionality to draw.io. Some of the more popular plugins include:

• anon: Scrambles all of the text and metadata in your diagram – it anonymises it.
• svgdata: Adds metadata and IDs to the diagram when you export it to an SVG file.
• sql: Lets you insert SQL to automatically create a database diagram.
• text: Extracts all of the text in your diagram.

An administrator can configure draw.io to enable one of the official draw.io plugins by default so that all diagram creators can access it via the draw.io menu.

1. Go to the draw.io Configuration tab in the draw.io Configuration section of your Confluence Cloud settings.
2. Add the short name for the plugin you want to load by default to the plugins option. Add multiple plugins separated by a semicolon.
3. Click Save when you are done.

{ "plugins": ["anon;text"] }

As an administrator, you can customise draw.io in Confluence Cloud to make it easier and faster for your users to create diagrams following your company’s particular style by setting default colours, style palettes, and fonts. You can even make the draw.io interface fit your customised Confluence Cloud interface.

Custom colour palettes

There are three main colour palettes you can customise in draw.io. The style palette at the top of the format panel on the Style tab, preset colours in the colour dialog, and the large colour palette in the colour dialog.

These are changed by adding colour information to the JSON string in the draw.io Configuration section in your Confluence Cloud settings.

Set custom colour palettes for draw.io in Confluence Cloud

1. Go to the draw.io Configuration tab in the draw.io Configuration section of your Confluence Cloud settings.
2. For each colour palette you want to customise, define the colours using hex codes.
   • defaultColorSchemes: Changes the styles in the format panel colour palette.
   • customColorSchemes: Adds an extra styles in front of the default colour schemes.
   • presetColors: Changes changes the default colours in the small upper pallette in the colour dialog, and you must specify colours for the entire small palette. Add hex colour codes without the hash character (#).
   • customPresetColors: Adds one or more colours which will appear in front of the default preset colours. Add hex colour codes without the hash character (#).
   • defaultColors: Changes the large palette in the colour dialog. You must define all 120 colours. Add hex colour codes without the hash character (#).
3. Once you have finished customising, click Save.

For example, this defines a custom pastel style palette (with no border), and an orange default preset colour palette.
{
"customColorSchemes": [[{"fill": "#ffb3ba", "stroke": "none"},
{"fill": "#ffdfba", "stroke": "none"},
{"fill": "#ffffba", "stroke": "none"},
{"fill": "#baffc9", "stroke": "none"},
{"fill": "#bae1ff", "stroke": "none"},
{"fill": "#eecbff", "stroke": "none"},
{"fill": "#a2798f", "stroke": "none"},
{"fill": "#8caba8", "stroke": "none"}]],
"presetColors": [
"f79862", "f05e23", "be5504", "d7722c", "cb5c0d", "b3672c",
"b1560f", "813f0b", "ef820d", "ffbf00", "cc7722", "fda50f",
"ef7215", "964000", "ff7417", "793802", "eb9605", "883000",
"fd6a02", "f9a602", "8b4000", "f9821a", "fc6600", "daa520"] }

See more examples of how to customise colours in draw.io for Confluence Cloud

Custom fonts

You can change what appears by default in the list of fonts in the Font tab of the format panel by editing the draw.io configuration JSON in your Confluence Cloud Settings.

1. Go to the draw.io Configuration tab in the draw.io Configuration section of your Confluence Cloud settings.
2. Add the code to customise the default font list. The code below lists only three fonts in the default font list. If you don’t want to override the default fonts, use the customFonts option to add the extra fonts at the top of the fonts list.
   { "defaultFonts": ["Courier New", "Tahoma", "Helvetica"] }
   
3. To use web or Google fonts, add the publicly accessible URL to the fontCssoption, and then add it to either the defaultFonts or the customFonts list. This adds two Google fonts and one web font to the custom fonts list. Make sure this is all one line.
   {
"fontCss": "@import url('https://fonts.googleapis.com/css?family=Princess+Sofia&display=swap'); @import url('https://fonts.googleapis.com/css?family=Girassol&display=swap'); @font-face { font-family: 'Waltograph'; src: url(https://fontlibrary.org/assets/fonts/waltograph/23a40698cd1bb84f930b7a0884c134a6/ab260a56f2b852b78f81eac337e0a2fc/WaltographRegular.otf) format('opentype') }",
"customFonts": ["Princess Sofia", "Girassol", "Waltograph"] }
4. Click Save when you are done.

Exporting diagrams: The external image and PDF export features do not currently support custom fonts.

Learn more about using custom fonts in draw.io in Confluence Cloud

Custom default shape and connector styles

Administrators can also add JSON code in the draw.io configuration to set a custom default style for shapes and connectors. When a Confluence Cloud user adds a shape to the drawing canvas or draws a connector, it will automatically use this by default, until they set a new style.

• defaultVertexStyle sets the default style for shapes.
• defaultEdgeStyle sets the default style for connectors.

1. Go to the draw.io Configuration section of your Confluence Cloud settings.
2. Add the style settings to the JSON text entry area on the draw.io Configuration tab.
3. Click Save when you are done.
   {
"defaultVertexStyle": {"fontFamily":"Courier New", "fillColor":"#dae8fc", "strokeColor":"#6c8ebf", "strokeWidth":"1"},
"defaultEdgeStyle": {"fontFamily":"Courier New", "edgeStyle":"orthogonalEdgeStyle", "rounded":"1", "jettySize":"auto", "orthogonalLoop":"1", "fillColor":"#dae8fc", "strokeColor":"#6c8ebf"}
}

Now, whenever a new user creates a diagram, shapes added to the drawing canvas will follow this style.

Learn more about using personal and global custom default styles in Confluence Cloud

Custom menu colour and theme

You can change the colour of the draw.io editor’s menu bar in Confluence Cloud by adding some CSS code to the draw.io Configuration. This is useful when you want a consistent style or theme for your Confluence apps in your customised Confluence Cloud instance. You can also set a theme to use by default whenever a user creates a diagram.

1. Go to the draw.io Configuration tab in the draw.io Configuration section of your Confluence Cloud settings.
2. Add the CSS code to the JSON string to customise the background colour of the menu bar.
3. Set a default theme using the ui option.
   With the following configuration code, users will see an orange menu bar and use the Kennedy theme by default.
   {
"css": ".geMenubarContainer { background-color: #F08705 !important; } .geMenubar { background-color: #F08705 !important; }“,
"ui": "kennedy"
}
4. Click Save when you are finished.

The four themes you can use include:

• Kennedy: The Kennedy theme does not include the draw.io logo.
• atlassian: The default Atlassian theme uses the Atlassian colours.
• dark: The Dark theme is for users who prefer working on a dark background.
• min: The Minimal theme has a larger drawing canvas and uses floating panels for shape libraries and format settings.

See more about customising the draw.io user interface in Confluence Cloud

Since the Atlassian Summit in April 2019, we’ve added several new features to draw.io and updated the shape libraries for two of the popular cloud service platforms.

Filter diagrams by page and layers on Confluence

With view filtering in the draw.io Confluence macros, you can now select a page and limit what the reader sees to specific layers in the draw.io macro settings. Such filtered diagrams will be printed or exported exactly as you see them on the Confluence page. View filtering is currently available in draw.io for Confluence Server and Confluence Data Center, and will be coming to Confluence Cloud by the end of October 2019.

Learn more about filtered views in the draw.io Confluence macro

Rulers and measurements

This is a subtle, helpful addition – you may not have noticed that we’ve added rulers around the drawing canvas. When you move a shape, you’ll see blue guidelines appear on each ruler showing the outer edges of the shape you are moving. Use the ruler and these guidelines to line your shapes up more easily.

If you prefer to work in millimeters, select View > Units > Millimeters from the draw.io menu.

Updates to the GCP and AWS shape libraries

Google and Amazon regularly update their icons and template examples, which are used to model infrastructures on their cloud platforms. Whenever new icons are released, the respective shape libraries in draw.io are also updated.

To use Amazon’s 2019 AWS shapes, select More Shapes in the left-hand panel, scroll down to the Networking section, then enable the AWS19 shape library.

The Google Cloud Platform shape library always contains the most recent version of the icons as detailed in the GCP Official Icons and Solution Architectures presentation. Select More Shapes, scroll to the Networking section, then enable the Google Cloud Platform shape library.

Once you’ve enabled one of these shape libraries, you’ll see the icons sorted into logical groups in the left panel.

Comment on draw.io diagrams on Confluence

While the comment functionality was available in Confluence Cloud before last Summit, it arrived later on Confluence Server and Confluence Data Center. Now your Confluence users can comment on the draw.io diagrams in a similar way to adding inline comments to the page text content.

See how to work with comments on draw.io diagrams on Confluence Server and Data Center