<?xml version="1.0" encoding="UTF-8"?><rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:georss="http://www.georss.org/georss" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" > <channel> <title>draw.io Archives - Modern Data & AI</title> <atom:link href="https://www.moderndata.ai/tag/draw-io/feed/" rel="self" type="application/rss+xml" /> <link>https://www.moderndata.ai/tag/draw-io/</link> <description>A blog on Power BI & Azure Data Platform</description> <lastBuildDate>Wed, 05 Aug 2020 15:23:06 +0000</lastBuildDate> <language>en-US</language> <sy:updatePeriod> hourly </sy:updatePeriod> <sy:updateFrequency> 1 </sy:updateFrequency> <generator>https://wordpress.org/?v=6.1.7</generator> <image> <url>https://www.moderndata.ai/wp-content/uploads/2021/11/blog-icon.ico</url> <title>draw.io Archives - Modern Data & AI</title> <link>https://www.moderndata.ai/tag/draw-io/</link> <width>32</width> <height>32</height> </image> <site xmlns="com-wordpress:feed-additions:1">162855274</site> <item> <title>Working with Azure icons in draw.io (diagrams.net)</title> <link>https://www.moderndata.ai/2020/08/working-with-azure-icons-in-draw-io-diagrams-net/?utm_source=rss&utm_medium=rss&utm_campaign=working-with-azure-icons-in-draw-io-diagrams-net</link> <comments>https://www.moderndata.ai/2020/08/working-with-azure-icons-in-draw-io-diagrams-net/#comments</comments> <dc:creator><![CDATA[Dave Ruijter]]></dc:creator> <pubDate>Wed, 05 Aug 2020 18:21:00 +0000</pubDate> <category><![CDATA[Generic]]></category> <category><![CDATA[Architecture]]></category> <category><![CDATA[Azure]]></category> <category><![CDATA[Diagram]]></category> <category><![CDATA[diagrams.net]]></category> <category><![CDATA[draw.io]]></category> <category><![CDATA[GitHub]]></category> <category><![CDATA[Icons]]></category> <guid isPermaLink="false">https://www.moderndata.ai/?p=693</guid> <description><![CDATA[<p>Every now and then I need to draw a diagram for a solution or platform architecture, and enjoy doing that! I usually spend more time on them then planned 🙄. There are lots of tools to create these diagrams, and lately I have been primarily using draw.io and I love it 🤩. Want to know […]</p> <p>The post <a rel="nofollow" href="https://www.moderndata.ai/2020/08/working-with-azure-icons-in-draw-io-diagrams-net/">Working with Azure icons in draw.io (diagrams.net)</a> appeared first on <a rel="nofollow" href="https://www.moderndata.ai">Modern Data & AI</a>.</p> ]]></description> <content:encoded><![CDATA[ <p><strong>Every now and then I need to draw a diagram for a solution or platform architecture, and enjoy doing that! I usually spend more time on them then planned <img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f644.png" alt="🙄" class="wp-smiley" style="height: 1em; max-height: 1em;" />. There are lots of tools to create these diagrams, and lately I have been primarily using draw.io and I love it <img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f929.png" alt="🤩" class="wp-smiley" style="height: 1em; max-height: 1em;" />. Want to know how I make sure I have the latest Azure icons to work with? Read on!</strong></p> <p class="has-text-color has-background has-very-dark-gray-color has-very-light-gray-background-color"><strong>tl;dr</strong><span id="su_tooltip_674f72fddc069_button" class="su-tooltip-button su-tooltip-button-outline-yes" aria-describedby="su_tooltip_674f72fddc069" data-settings='{"position":"top","behavior":"hover","hideDelay":0}' tabindex="0"><sup>ⓘ</sup></span><span style="display:none;z-index:100" id="su_tooltip_674f72fddc069" class="su-tooltip" role="tooltip"><span class="su-tooltip-inner su-tooltip-shadow-no" style="z-index:100;background:#505050;color:#F3F3F3;font-size:14px;border-radius:0px;text-align:left;max-width:300px;line-height:1.25"><span class="su-tooltip-title"></span><span class="su-tooltip-content su-u-trim">used by someone who wrote a large post / article / whatever, to show a brief summary of their post as it might be too long</span></span><span id="su_tooltip_674f72fddc069_arrow" class="su-tooltip-arrow" style="z-index:100;background:#505050" data-popper-arrow></span></span><br>Use this <a aria-label="undefined (opens in a new tab)" href="https://app.diagrams.net/?splash=0&libs=general&clibs=Uhttps://raw.githubusercontent.com/DaveRuijter/diagrams.net/master/1.%20Azure%20Icon%20Set;Uhttps://raw.githubusercontent.com/DaveRuijter/diagrams.net/master/2.%20Azure%20Docs" target="_blank" rel="noreferrer noopener">URL</a> to directly open draw.io with the essential Azure icon libraries loaded and ready to use! Check <a aria-label="undefined (opens in a new tab)" href="https://github.com/DaveRuijter/diagrams.net" target="_blank" rel="noreferrer noopener">my GitHub repo</a> for all the libraries.</p> <p>Before I continue, did you know that the open source draw.io will be rebranded to diagrams.net? It’s because of the .io domain. You can find a link to more info on the ins-and-outs at the end of this blog post.</p> <h4>Online gem</h4> <p>It always takes more time to get a diagram correct then I want it to. I search way too long for icons. Sometimes I even end up creating them myself. There are some collections available online, but I can’t always see when they have been updated, and usually they are incomplete, so my search continues… </p> <p>But recently I stumbled upon an online <img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f48e.png" alt="💎" class="wp-smiley" style="height: 1em; max-height: 1em;" />: the largest single collection of Azure icons available (or at least that I could find)! The collection combines multiple online sources into a single collection. You can browse through it online and download individual icons or the whole shebang. And the best thing is it’s up-to-date and will hopefully continue to be so (you never know of course)! It’s created by <strong>Ben Coleman</strong>, and you can find the web interface here: <a href="https://code.benco.io/icon-collection/">https://code.benco.io/icon-collection/</a>. His repo with the icons and even the tools used to create and manage this collection are available on GitHub: <a aria-label="undefined (opens in a new tab)" href="https://github.com/benc-uk/icon-collection" target="_blank" rel="noreferrer noopener">https://github.com/benc-uk/icon-collection</a>.</p> <h4>How to use the icon collection in draw.io (diagrams.net)</h4> <p>I’ve made it easy for you: I’ve created a couple of custom libraries with all the icons! I’ve uploaded them to my GitHub, and you can use them in a couple of ways. </p> <p>The first and most simple option is to just start the diagrams.net app with an URL with the correct libraries included as URL parameters:</p> <ul><li>Click <a href="https://app.diagrams.net/?splash=0&libs=general&clibs=Uhttps://raw.githubusercontent.com/DaveRuijter/diagrams.net/master/1.%20Azure%20Icon%20Set;Uhttps://raw.githubusercontent.com/DaveRuijter/diagrams.net/master/2.%20Azure%20Docs">here</a> to open app.diagrams.net <strong>with the essential libraries</strong>.</li><li>Click <a aria-label="undefined (opens in a new tab)" href="https://app.diagrams.net/?splash=0&libs=general&clibs=Uhttps://raw.githubusercontent.com/DaveRuijter/diagrams.net/master/1.%20Azure%20Icon%20Set;Uhttps://raw.githubusercontent.com/DaveRuijter/diagrams.net/master/2.%20Azure%20Docs;Uhttps://raw.githubusercontent.com/DaveRuijter/diagrams.net/master/3.%20Azure%20Cloud%20Design%20Studio%20Set;Uhttps://raw.githubusercontent.com/DaveRuijter/diagrams.net/master/4.%20Azure%20Patterns%20A-C;Uhttps://raw.githubusercontent.com/DaveRuijter/diagrams.net/master/5.%20Azure%20Patterns%20D-L;Uhttps://raw.githubusercontent.com/DaveRuijter/diagrams.net/master/6.%20Azure%20Patterns%20M-S;Uhttps://raw.githubusercontent.com/DaveRuijter/diagrams.net/master/7.%20Azure%20Patterns%20T-Z;Uhttps://raw.githubusercontent.com/DaveRuijter/diagrams.net/master/8.%20Azure%20%26%20Microsoft%20misc;Uhttps://raw.githubusercontent.com/DaveRuijter/diagrams.net/master/9.%20Logos%20%26%20brands" target="_blank" rel="noreferrer noopener">here</a> to open app.diagrams.net <strong>with all 9 libraries</strong> <br><em>(this will take a minute to load in the app, give it some time!)</em>.</li></ul> <p>Alternatively, you can open draw.io (diagrams.net) and follow these steps to include the libraries manually.</p> <p>First, go to <a aria-label="undefined (opens in a new tab)" href="https://github.com/DaveRuijter/diagrams.net#links-to-the-raw-library-files-to-add-them-to-the-application-manually" target="_blank" rel="noreferrer noopener">my GitHub repo README</a>, check the list of URLs for the libraries, and copy the URL of the library you want to use:</p> <figure class="wp-block-image size-large is-resized img-border"><img decoding="async" src="https://www.moderndata.ai/wp-content/uploads/2020/08/2020-08-05-16_26_49-DaveRuijter_diagrams.net-and-19-more-pages-MVP-_-Thuis-Microsoft​-Edge-1.png" alt="" class="wp-image-724" width="550" srcset="https://www.moderndata.ai/wp-content/uploads/2020/08/2020-08-05-16_26_49-DaveRuijter_diagrams.net-and-19-more-pages-MVP-_-Thuis-Microsoft​-Edge-1.png 1006w, https://www.moderndata.ai/wp-content/uploads/2020/08/2020-08-05-16_26_49-DaveRuijter_diagrams.net-and-19-more-pages-MVP-_-Thuis-Microsoft​-Edge-1-600x286.png 600w, https://www.moderndata.ai/wp-content/uploads/2020/08/2020-08-05-16_26_49-DaveRuijter_diagrams.net-and-19-more-pages-MVP-_-Thuis-Microsoft​-Edge-1-300x143.png 300w, https://www.moderndata.ai/wp-content/uploads/2020/08/2020-08-05-16_26_49-DaveRuijter_diagrams.net-and-19-more-pages-MVP-_-Thuis-Microsoft​-Edge-1-768x366.png 768w, https://www.moderndata.ai/wp-content/uploads/2020/08/2020-08-05-16_26_49-DaveRuijter_diagrams.net-and-19-more-pages-MVP-_-Thuis-Microsoft​-Edge-1-370x177.png 370w, https://www.moderndata.ai/wp-content/uploads/2020/08/2020-08-05-16_26_49-DaveRuijter_diagrams.net-and-19-more-pages-MVP-_-Thuis-Microsoft​-Edge-1-570x272.png 570w, https://www.moderndata.ai/wp-content/uploads/2020/08/2020-08-05-16_26_49-DaveRuijter_diagrams.net-and-19-more-pages-MVP-_-Thuis-Microsoft​-Edge-1-770x367.png 770w" sizes="(max-width: 1006px) 100vw, 1006px" /></figure> <p class="has-text-color has-very-dark-gray-color">Then, click on the ‘File’ menu. Click on ‘Open Library from’. Click on ‘URL…’.</p> <figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://www.moderndata.ai/wp-content/uploads/2020/08/2020-08-05-16_15_53--689x1024.png" alt="Navigate to 'open library from url' dialog" class="wp-image-719" width="400" srcset="https://www.moderndata.ai/wp-content/uploads/2020/08/2020-08-05-16_15_53--689x1024.png 689w, https://www.moderndata.ai/wp-content/uploads/2020/08/2020-08-05-16_15_53--600x892.png 600w, https://www.moderndata.ai/wp-content/uploads/2020/08/2020-08-05-16_15_53--202x300.png 202w, https://www.moderndata.ai/wp-content/uploads/2020/08/2020-08-05-16_15_53--768x1142.png 768w, https://www.moderndata.ai/wp-content/uploads/2020/08/2020-08-05-16_15_53--370x550.png 370w, https://www.moderndata.ai/wp-content/uploads/2020/08/2020-08-05-16_15_53--570x847.png 570w, https://www.moderndata.ai/wp-content/uploads/2020/08/2020-08-05-16_15_53--770x1145.png 770w, https://www.moderndata.ai/wp-content/uploads/2020/08/2020-08-05-16_15_53--390x580.png 390w, https://www.moderndata.ai/wp-content/uploads/2020/08/2020-08-05-16_15_53-.png 834w" sizes="(max-width: 689px) 100vw, 689px" /><figcaption>Navigate to ‘open library from url’ dialog.</figcaption></figure> <p>Then, past in the URL of the library and click ‘Open’:</p> <figure class="wp-block-image size-large is-resized"><img fetchpriority="high" decoding="async" src="https://www.moderndata.ai/wp-content/uploads/2020/08/2020-08-05-15_52_24-Untitled-Diagram-diagrams.net_.png" alt="" class="wp-image-720" width="350" height="185"/><figcaption>Paste the ULR and click Open.</figcaption></figure> <p>And, after a few seconds (depending on your bandwidth), the library is ready to use:</p> <figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://www.moderndata.ai/wp-content/uploads/2020/08/2020-08-05-17_00_44-.png" alt="" class="wp-image-738" width="400" srcset="https://www.moderndata.ai/wp-content/uploads/2020/08/2020-08-05-17_00_44-.png 517w, https://www.moderndata.ai/wp-content/uploads/2020/08/2020-08-05-17_00_44--195x300.png 195w, https://www.moderndata.ai/wp-content/uploads/2020/08/2020-08-05-17_00_44--370x570.png 370w, https://www.moderndata.ai/wp-content/uploads/2020/08/2020-08-05-17_00_44--376x580.png 376w" sizes="(max-width: 517px) 100vw, 517px" /><figcaption>(if you know how to display the library name correctly using this approach, please share it in a reply)</figcaption></figure> <p>Repeat this for all the libraries that you want to include.</p> <h4>Other info</h4> <ul><li>An overview of all keyboard shortcuts for draw.io (diagrams.net): <a href="https://app.diagrams.net/shortcuts.svg">https://app.diagrams.net/shortcuts.svg</a></li><li>Did you know draw.io is <a aria-label="undefined (opens in a new tab)" href="https://www.diagrams.net/blog/move-diagrams-net" target="_blank" rel="noreferrer noopener">slowly being renamed to diagrams.net</a>?</li><li>Did you know you can even <a aria-label="undefined (opens in a new tab)" href="https://www.diagrams.net/blog/embed-diagrams-vscode" target="_blank" rel="noreferrer noopener">create draw.io diagrams in VS Code</a>?</li><li>Supported URL parameters for diagrams.net: <a href="https://desk.draw.io/support/solutions/articles/16000042546">https://desk.draw.io/support/solutions/articles/16000042546</a></li><li>Documentation on draw.io libraries: <a href="https://github.com/jgraph/drawio-libs">https://github.com/jgraph/drawio-libs</a></li></ul> <p>The post <a rel="nofollow" href="https://www.moderndata.ai/2020/08/working-with-azure-icons-in-draw-io-diagrams-net/">Working with Azure icons in draw.io (diagrams.net)</a> appeared first on <a rel="nofollow" href="https://www.moderndata.ai">Modern Data & AI</a>.</p> ]]></content:encoded> <wfw:commentRss>https://www.moderndata.ai/2020/08/working-with-azure-icons-in-draw-io-diagrams-net/feed/</wfw:commentRss> <slash:comments>14</slash:comments> <post-id xmlns="com-wordpress:feed-additions:1">693</post-id> </item> </channel> </rss>