Blog post and minor updates

_posts/2020-04-15-mermaid-diagrams.md

@@ -15,9 +15,9 @@ Many developers prefer to describe their data structures and processes using tex
 
 ## Insert a Mermaid diagram
 
-1. Click _Arrange > Insert > Advanced > Mermaid_. Alternatively, click the ``+`` icon in the toolbar, then select _Advanced > Mermaid_.
-<br /><img src="/assets/img/blog/insert-mermaid-menu.png" style="max-width:100%;height:auto;" alt="Click Arrange > Insert > Advanced > Mermaid to create a diagram from Mermaid Markdown-inspired code">
-2. Paste your text into the text box, then click _Insert_.
+1. Click _Arrange > Insert > Mermaid_. Alternatively, click the ``+`` icon in the toolbar, then select _Mermaid_.
+<br /><img src="/assets/img/blog/insert-mermaid-menu.png" style="max-width:100%;height:auto;" alt="Click Arrange > Insert > Mermaid to create a diagram from Mermaid Markdown-inspired code">
+1. Paste your text into the text box, then click _Insert_.
 <br /><img src="/assets/img/blog/mermaid-flowchart-example-code.png" style="width=100%;max-width:400px;height:auto;" alt="Paste the text in Mermaid syntax, then click Insert">
 
 Your diagram will be automatically created and formatted from your text, and inserted as a single shape on the drawing canvas.

_posts/2022-10-21-diagrams-from-code.md

@@ -39,7 +39,7 @@ To recreate the entities, you'll need to delete the existing entities and their
 
 Mermaid can describe a wider range of diagrams, not just UML.  Its Markdown-like syntax is very easy to write and supported by several popular platforms. 
 
-1. Click _Arrange > Insert > Advanced > Mermaid_. 
+1. Click _Arrange > Insert > Mermaid_. 
 <br /><img src="/assets/img/blog/mermaid-flowchart-example-code.png" style="width=100%;max-width:300px;height:auto;" alt="Paste the text in Mermaid syntax, then click Insert">
 1. Add the Mermaid syntax description in the large text field. 
 2. Click _Insert_ and the diagram will be generated and added as a 'shape' on the drawing canvas.

_posts/2024-06-11-mermaid-elk-layout.md

@@ -8,7 +8,7 @@ tags: [integrations,uml]
 categories: [integrations,features,use-cases, import]
 ---
 
-Mermaid is a text-based syntax that you can use to describe a diagram, and automatically lay it out neatly on the diagram canvas. Enter your Mermaid diagram description in draw.io via _Arrange > Insert > Advanced > Mermaid_ in the draw.io menu or _+ > Advanced > Mermaid_ from the toolbar. draw.io has updated to Mermaid version 10.9.1 to support the new ELK automatic layout.
+Mermaid is a text-based syntax that you can use to describe a diagram, and automatically lay it out neatly on the diagram canvas. Enter your Mermaid diagram description in draw.io via _Arrange > Insert > Mermaid_ in the draw.io menu or _+ > Mermaid_ from the toolbar. draw.io has updated to Mermaid version 10.9.1 to support the new ELK automatic layout.
 <br /><img src="/assets/img/blog/mermaid-flow-elk-insert.png" style="width=100%;max-width:350px;height:auto;" alt="Tell the Mermaid diagram generation tool to use the ELK layout option in your text diagram description">
 
 ## Text to diagram tools in draw.io
@@ -39,10 +39,10 @@ graph TD
 ```
 Add this Mermaid diagram to draw.io.
 
-1. Select _Arrange > Insert > Advanced > Mermaid_ from the menu or _+ > Advanced > Mermaid_ from the toolbar if you are using the [Simple mode](/blog/simple-mode-diagrams.html) or the [Sketch editor theme](/blog/sketch-online-whiteboard.html).
-<br /><img src="/assets/img/blog/insert-mermaid-menu.png" style="max-width:100%;height:auto;" alt="Click Arrange > Insert > Advanced > Mermaid to create a diagram from Mermaid Markdown-inspired code">
-2. Enter the text description of your diagram using Mermaid syntax in the large text box. 
-3. From the drop-down list, select whether you want to insert the diagram with draw.io shapes (_Diagram_), or as a single image (_Image_), and click _Insert_. 
+1. Select _Arrange > Insert > Mermaid_ from the menu or _+ > Mermaid_ from the toolbar if you are using the [Simple mode](/blog/simple-mode-diagrams.html) or the [Sketch editor theme](/blog/sketch-online-whiteboard.html).
+<br /><img src="/assets/img/blog/insert-mermaid-menu.png" style="max-width:100%;height:auto;" alt="Click Arrange > Insert > Mermaid to create a diagram from Mermaid Markdown-inspired code">
+1. Enter the text description of your diagram using Mermaid syntax in the large text box. 
+2. From the drop-down list, select whether you want to insert the diagram with draw.io shapes (_Diagram_), or as a single image (_Image_), and click _Insert_. 
 <br /><img src="/assets/img/blog/mermaid-flowchart-example-code.png" style="width=100%;max-width:400px;height:auto;" alt="Paste the text in Mermaid syntax, then click Insert">
 
 **Diagram** (default): When you insert the Mermaid diagram using the draw.io shapes, you can connect additional shapes and connectors and style your diagram. To change the original Mermaid syntax, first delete the previously inserted shapes, and re-enter the Mermaid description of your diagram by repeating the steps above. 

_posts/2024-10-18-uml-diagram-tools.md

@@ -71,7 +71,7 @@ See the [draw.io diagram repository on GitHub](https://github.com/jgraph/drawio-
 
 [Mermaid](/blog/mermaid-diagrams.html) is a popular text-based UML diagramming tools and supported by draw.io. Many developers find describing sequence diagrams in particular easier using text.
 
-Click _Arrange > Insert > Advanced > Mermaid_. 
+Click _Arrange > Insert > Mermaid_. 
 
 For example, the following Mermaid text generates a sequence diagram.
 ```

_posts/2025-07-24-uml-package-diagrams.md

@@ -0,0 +1,75 @@
+---
+layout: post
+author: draw.io
+slug: uml-package-diagrams
+date: 2025-07-30 09:43:00
+title: How to draw UML package diagrams
+tags: [shape libraries, uml]
+categories: [use-cases, templates, shape-libraries]
+---
+
+UML package diagrams document the structure of grouped components in a system along with their dependencies, especially for multi-layered web and application architectures. Package diagrams fall in between the detailed [class diagrams](/blog/uml-class-diagrams.html) and the high-level more abstract [profile diagrams](/blog/uml-profile-diagrams.html) and model diagrams. 
+<br /><img src="/assets/img/blog/uml-package-example.png" style="width=100%;max-width:600px;height:auto;" alt="A simple UML package diagram to show ">
+
+Packages of 'third-party' code are often used in software projects, reducing the need to develop the entire system in-house. While [UML diagrams](/blog/uml-overview.html) are commonly used for documenting software code in detail, several abstract types of UML diagrams can provide a clear overview of any type of medium to large system or complex service. 
+
+By drawing the system structured into packages, it is easier to identify where components could be externally sourced or re-used in other projects. 
+
+**Tip:** UML diagrams aren't limited to programming - you can document any system or service by grouping subsystems, service bundles, departments, and components into packages for a structured overview.
+
+**Enable the UML 2.5 shape library in draw.io**
+
+Type ``package`` into the search field and press ``Enter`` to see all package shapes. 
+<br /><img src="/assets/img/blog/uml-package-search.png" style="width=100%;max-width:350px;height:auto;" alt="Search for package shapes to quickly draw a package diagram in draw.io without enabling shape libraries">
+
+You may find the other shapes and connectors in the UML shape libraries useful.
+
+1. Click on _More Shapes_ at the bottom of the shapes panel. 
+2. In the _Software_ section, click on the checkboxes next to the _UML2.5_ and _UML_ shape libraries and click _Apply_.
+3. In the shapes panel, you can now see the libraries. Hover over any shape to see its name and a larger preview. 
+<br /><img src="/assets/img/blog/uml-package-library-shapes.png" style="width=100%;max-width:500px;height:auto;" alt="The UML 2.5 shape library contains most of the useful package shapes in draw.io">
+
+The _SysML_ shape library in the _Business_ section also contains a number of package shapes.
+<br /><img src="/assets/img/blog/uml-package-sysml-library.png" style="width=100%;max-width:500px;height:auto;" alt="The SysML shape library also contains a number of package shapes you can use in your UML diagrams">
+
+**Can I generate this diagram?**
+
+[Mermaid syntax](https://mermaid.js.org/intro/) - the format that most diagram generators use - doesn't currently define package diagrams, but it does support UML class, sequence, and state diagrams.
+
+The [smart templates feature](/blog/smart-diagram-generation.html) in draw.io can provide inspiration for a package diagram as a class diagram, which may be useful when designing a new, large system from scratch. 
+
+Keep in mind that the generator doesn't currently understand the package diagram syntax or shapes and cannot know anything about existing components in your system or third-party offerings that could be used as a 'package', so you will need to edit a generated diagram heavily. 
+
+[_How to write good queries for smart templates_](/blog/write-query-generate-diagram.html)
+
+## Components of a package diagram
+
+**Package:** a container for classes and interfaces. The label can be either in the package tab when the package shape contains other elements, or in the middle of the shape if its elements or contained packages are not drawn. 
+
+<img src="/assets/img/blog/uml-package-shapes.png" style="width=100%;max-width:600px;height:auto;" alt="A simple UML package diagram to show ">
+
+**Dashed connectors:** a dependency between packages. You can add an optional label inside angle brackets to signify various types of dependency: ``<<needs>>``, ``<<use>>``, ``<<import>>``, ``<<access>>`` or ``<<merge>>``. Make sure there are no cycles in merge dependencies.
+
+**Element:** a single element within a package. An element may be a fully contained package, a class, an interface or a subsystem. While package diagrams are generally a simple representation of the static system structure, highlighting an internal element can be useful to show its importance. 
+
+**Combining package and class diagrams:** detail classes inside their package shapes. However, this would only be practical for small systems or to highlight a few specific elements within a system.
+
+## UML package diagram examples
+
+In this simple example of an online shop, the system's elements are separated into one package containing the web and mobile app interface, packages for the shopping cart and payment systems, and one package containing all the databases. 
+<br /><img src="/assets/img/blog/package-diagram-example.png" style="width=100%;max-width:300px;height:auto;" alt="A simple UML package diagram to show ">
+
+This example can be extended into a medium-level overview of a larger company that develops products and sells them both in their physical stores and online in their web app and mobile app. This company employs third-party services for photography, video creation and shipping. 
+
+While this is likely more detailed than most package diagrams as it shows business and application package 'layers' as well the store-related packages, it does illustrate how elements of a more complex business system can be grouped into logical packages. 
+<br /><img src="/assets/img/blog/uml-package-example.png" style="width=100%;max-width:600px;height:auto;" alt="A simple UML package diagram to show ">
+
+
+
+## Other types of UML diagrams
+
+The UML specification allows you to draw many different types of diagrams to model the behaviour and data of a system in different ways.
+
+Refer to the [UML diagram overview post](/blog/uml-overview.html) for details of the many other types of UML diagrams. 
+
+[<img src="/assets/img/blog/uml-2-5-diagram-overview.png" style="width=100%;max-width:500px;height:auto;" alt="Diagram types defined in UML 2.5">](https://app.diagrams.net/?lightbox=1&highlight=0000ff&edit=_blank&layers=1&nav=1&title=#Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fjgraph%2Fdrawio-diagrams%2Fdev%2Fexamples%2Fconcept-map-uml-diagrams-overview.drawio)

doc/faq/app-version-confluence-cloud.md

@@ -15,5 +15,5 @@ You can check which version of the draw.io app is currently installed in your in
 **Note:** You will not see a SEN if you have not licensed the draw.io app for Confluence or currently have an active trial, you will not have a SEN.
 
 1. In this case, as an administrator, go to the Confluence Settings, and select _Manage apps_ from the left-hand navigation.
-2. Expand the draw.io app information, click on the _Free trial_ button and wait until your trial license is installed. Your SEN will then show on the _draw.io Support_ page.
+2. Expand the draw.io app information, click on the _Subscribe_ button and wait until your trial license is installed. Your SEN will then show on the _draw.io Support_ page.
 <br /><img src="/assets/img/blog/drawio-confluence-cloud-free-trial.png" alt="Manage the draw.io app in the Confluence Cloud Settings as an administrator" style="max-width:100%;height:auto;">

doc/faq/mermaid-diagram-edit.md

@@ -0,0 +1,27 @@
+---
+title: Re-edit a mermaid diagram in draw.io
+layout: page
+faq: true
+categories: [Integrations, features]
+---
+
+When Mermaid code is inserted and converted to draw.io shapes, you gain the ability to style, edit and add to your diagram using the draw.io features. But you can't re-edit the original Mermaid code. 
+
+To be able to view and edit the Mermaid code of an inserted diagram, you must insert it as an image. 
+
+**Insert the Mermaid diagram as an SVG image**
+
+1. Click _Arrange > Insert > Mermaid_ or _+ > Mermaid_ from the toolbar. 
+<br /><img src="/assets/img/blog/insert-mermaid-menu.png" style="max-width:100%;height:auto;" alt="Click Arrange > Insert > Mermaid to create a diagram from Mermaid Markdown-inspired code">
+1. Add your Mermaid code in the large text block. 
+<br /><img src="/assets/img/blog/mermaid-flow-insert-image.png" style="width=100%;max-width:350px;height:auto;" alt="Insert the Mermaid code as an image so you can edit it later">
+1. Select _Image_ from the list, then click _Insert_ to add it to the drawing canvas. 
+<br /><img src="/assets/img/blog/mermaid-flow-example-image.png" style="width=100%;max-width:350px;height:auto;" alt="Hover over a Mermaid diagram image in draw.io to see the Mermaid syntax for that diagram in a tooltip">
+
+This generates the Mermaid diagram as a single SVG image and places it on the drawing canvas. Hover over the SVG image to see the Mermaid code in the tooltip. Note that you can't edit or style the individual shapes or connectors in this SVG image version. 
+
+**Edit the Mermaid SVG image**
+
+1. Double-click on the SVG image on the drawing canvas to open the Mermaid code dialog.
+2. Edit the text and click _Apply to regenerate the SVG image.  
+<br /><img src="/assets/img/blog/mermaid-flow-example-edit.gif" style="width=100%;max-width:350px;height:auto;" alt="Hover over a Mermaid diagram image in draw.io to see the Mermaid syntax and double click to edit it">

doc/faq/migrate-drawio-confluence.md

@@ -55,19 +55,20 @@ We'll use an example of migrating draw.io from one Confluence Cloud instance (so
 
 Export and save the ``Page IDs`` used in diagrams that contain a link to a Confluence page.
 
-1. Go to your Confluence administration, and select _draw.io Configuration_ in the left panel, then select the _``Page IDs Export``_ tab.
-2. Click _Export data_ and wait until it the process completes.
+1. Go to your Confluence administration, and select _Draw.io add-on > Configuration_ in the left panel, then select the _``Page IDs Export``_ tab.
+2. Click _Start Export_ and wait until it the process completes.
 <br /><img src="/assets/img/blog/confluence-cloud-export-pageids.png" style="max-width:100%;height:auto;" alt="To make sure links in diagrams continue to work, export the page IDs from Confluence to correctly migrate">
 1. Once the processing is done, click _Download_ to save the ``Page ID`` mapping file to your local device.
 
 **Step 2: Import the Page IDs into your target Confluence Cloud instance**
 
 Restore the link targets in your draw.io diagrams in the target Confluence Cloud instance by importing the Page IDs.
 
-1. Go to your target Confluence Cloud administration, and select _draw.io Configuration_ in the left panel, then select the _``Page IDs Import``_ tab.
-2. Click _Start import_, select the file you previously saved to your local device, and select _Upload_. Wait until the import is complete.
+1. Go to your target Confluence Cloud administration, and select _Draw.io add-on > Configuration_ in the left panel, then select the _``Page IDs Import``_ tab.
+2. Click _Start Import_, select the file you previously saved to your local device, and select _Upload_. Wait until the import is complete.
 <br /><img src="/assets/img/blog/confluence-cloud-import-pageids.png" style="max-width:100%;height:auto;" alt="Import draw.io diagram data from another Confluence Cloud instance">
 
 Now, those diagrams that contained links should send you do the correct page in your new Confluence Cloud instance. And embedded diagrams should display correctly.
 
-_Optional:_ Re-index your target Confluence instance after importing the draw.io ``Page IDs`` to double check that attachments are correctly indexed.
+_Optional:_ Re-index your target Confluence instance after importing the draw.io ``Page IDs`` to double check that attachments are correctly indexed via the _draw.io re-indexing_ tab.
+<br /><img src="/assets/img/blog/confluence-cloud-reindexing.png" style="max-width:100%;height:auto;" alt="Reindex the draw.io diagrams in the Confluence Cloud instance">