Merge pull request #278 from jgraph/package-diagrams-post

Blog post and minor updates

Author: davidjgraph

_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/2021-07-09-dependency-graphs.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/2022-10-21-diagrams-from-code.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-06-11-mermaid-elk-layout.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/2024-10-18-uml-diagram-tools.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)