Draw.io guides

Draw.io

Basics

Click the link to access the official Draw.io guides. Here, you can learn more about the basics of Draw.io as well as advanced techniques like creating custom shapes.

Including Draw.io in AsciiDoc

If you have a drawio diagram (must be a .drawio.svg file!), you can add it to your document the following way.

  • AsciiDoc

  • Result

[[fig-example-drawio]] (1)
.example graphic (2)
image::drawio/examplegraphic.drawio.svg[image] (3)
1 Anchor for the graphic. Reference this anchor using <<fig-example-drawio>>
2 Graphic caption
3 Include of actual graphic
image
Figure 1. example graphic

Accessing the ASAM Library

This is described in the Setup.
To use assets from the library, drag and drop the required asset from the library on the left into your

Edit The ASAM Graphics Library

The ASAM Graphics Library for Draw.io consists of custom-made reusable graphics. During projects, new such graphics may be created. These should be added to the library to ensure they can be reused easily in other projects.

  • Using Git

  • Without local installation

  1. Check out the ASAM Graphics Library repository (https://code.asam.net/common/asam-graphic-library.git)

  2. Open Draw.io (online or locally)

  3. Click Open Library from/Device…​ and select the library file (.xml)

    open drawio library

  4. Create or load your new shapes or images

  5. Drag & drop all relevant shapes or images into the library section on the left

  6. Click the edit button (the pencil) next to the library name

  7. Add descriptive names to all added elements

  8. Click Export  Device to save it on your computer

  9. Locate the saved/exported library file

  10. Move it to the checked out repository to replace the previous version

  11. Stage, commit, and push the changes to remote. The commit message should describe the changes that were made

  1. Download the raw ASAM Graphics Library file to you computer

  2. Open Draw.io (online or locally)

  3. Click Open Library from/Device…​ and select the library file (.xml)

    open drawio library

  4. Create or load your new shapes or images

  5. Drag & drop all relevant shapes or images into the library section on the left

  6. Click the edit button (the pencil) next to the library name

  7. Add descriptive names to all added elements

  8. Click Export  Device to save it on your computer

  9. Locate the saved/exported library file

  10. Open the library file in your browser and click Replace

    asset library replace file

  11. Select the updated library file and drag & drop it into the upload window. Alternatively, use the click to upload button

  12. Add a commit message describing the changes that were made

  13. Create a new commit by clicking on Replace file