• To download all contents of the repository, navigate to the main page, click the Clone or download button and then select Download ZIP.

• Go to your downloads directory and extract the ZIP file contents and access the folder called drawio, it should be located in the following path:

YourDownloadsDirectory/ibm-cloud-stencils-master/drawio

• Confirm XML file(s) you wish to import are visible inside the the drawio folder in your downloads directory:

• Open the desktop Draw.io application in your computer or open draw.io in your browser.

• Select Create New Diagram, then click Create.

• Click on File > Open Library, browse your drawio folder in your downloads directory and select the XML file, then click on Open. Repeat for every additional XML file you wish to import.

• Confirm library or libraries are visible in the left panel:

• A GitHub.com account.
• Git CLI or GitHub Desktop.
• An SSH Key associated to the github.com account.

• Sign into github.
• While in the main page, click the Clone or download button, select on Use SSH if not already selected (Use HTTPS will be displayed) and then copy the link using the copy symbol:

• CD to directory where you wish to clone this repository.

• Clone the repository using git clone syntax using the previously copied ssh link:

$ git clone [email protected]:ibm-cloud-architecture/ibm-cloud-stencils.git
Cloning into 'ibm-cloud-stencils'...
Enter passphrase for key '/Users/youruserid/.ssh/id_rsa': 

• Enter the passphrase of your SSH key.

• Confirm repository was successfully cloned, the CLI should display something like this:

remote: Enumerating objects: 58893, done.
remote: Total 58893 (delta 0), reused 0 (delta 0), pack-reused 58893
Receiving objects: 100% (58893/58893), 185.09 MiB | 5.01 MiB/s, done.
Resolving deltas: 100% (18944/18944), done.
$ 

• Optionally use GitHub Desktop to Clone. In the main page, click the Clone or download button, select on Open in Desktop, wait for the prompt and select/confirm launching the link using GitHub Desktop application. Confirm directory where repository will be cloned:

  

  Click on Clone and wait for process to complete.

• Open the desktop Draw.io application in your computer or open draw.io in your browser.

• Select Create New Diagram, then click Create.

• Click on File > Open Library, browse your drawio folder in your cloned/local directory and select the XML file, then click on Open. Repeat for every additional XML file you wish to import.

• Confirm library or libraries are visible in the left panel:

1. Floating IP icon is an arrow with a closed circle that represents a NIC pointing outwards from an instance.

2. IBM VPC has a single subnet type Subnet where Subnet:ACL denotes a Subnet with an associated ACL which can be customized such as SubnetName:ACLName, SubnetCIDR:ACLName, split to 2 lines, etc.

3. Diagram containers if available in a tool (draw.io and Visio) are used as mentioned in the Overview.

4. To migrate existing boxes and groups to latest if desired, apply styles from new boxes and groups to existing diagram. For draw.io, updating styles in existing boxes that are not yet containers won't make existing contents of a box part of the container.

NOTE: For IBM internal designs/diagrams, you must use the desktop application (2.) to create or edit a diagram. The draw.io/diagrams.net web application (1.) is only approved for public designs that contain no forward-looking material

1. To use the IBM Stencils on draw.io in your browser: https://draw.io/?libs=ibm

2. To use the IBM Stencils on the draw.io desktop application do the following:

   1. Open application and click on "+ More Shapes" in the bottom left panel.
   2. Scroll down to the "Networking" section and check "IBM".
   3. Click "Apply" to finish.

   IBM Stencils should now be available in the embedded categories in the left panel.

3. Folders for draw.io on this github are used for changes not on draw.io and are subject to change.

4. When adding icons to diagrams the default background color for text should be transparent but instead may be white. See open issue #1 below for a workaround.

5. When exporting diagrams to svg ensure that icons are included (check Embed Image) if using svg offline and ensure white space is minimal (select entire diagram then check Selection Only and Crop) if embedding in a document.

Open Issues:

1. Issue #620 where setting the icon text background to transparent doesn't work.
   Status: Open. This issue happens if labelBackgroundColor=none is before the image; statement in icon style, so place the labelBackgroundColor=none to anywhere after the image; statement.
   Status: Open.

Fixed Issues:

1. Issue #724 where icons dropped onto container in FF would not stay in container when container is moved.

2. Issue #723 where overlaying a box across other boxes may cause underlying boxes to expand and have to be resized such as when placing a security group box across multiple subnet boxes. This scenario is working as designed so draw.io added a new property "expand" to swimlanes for our boxes. The current behavior is the default with expand=1 and our boxes are set to expand=0.

3. Issue #748 to set container=0 for deployedTo boxes as mentioned in Overview.

1. Boxes are implemented as containers.

2. Box tags are currently separate and can optionally be placed on upper left corner of boxes.

1. Refer to all-ibm-cloud-architecture-icons-October2019-WithVPCUpdatesFebruary2020.pptx on this github.