<?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 &amp; 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 &#38; 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 &amp; 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&#038;utm_medium=rss&#038;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 [&#8230;]</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 &amp; 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&amp;libs=general&amp;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&#8217;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&#8217;t always see when they have been updated, and usually they are incomplete, so my search continues&#8230; </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&#8217;s up-to-date and will hopefully continue to be so (you never know of course)! It&#8217;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&#8217;ve made it easy for you: I&#8217;ve created a couple of custom libraries with all the icons! I&#8217;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&amp;libs=general&amp;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&amp;libs=general&amp;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 &#8216;File&#8217; menu. Click on &#8216;Open Library from&#8217;. Click on &#8216;URL&#8230;&#8217;.</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 &#8216;open library from url&#8217; dialog.</figcaption></figure>



<p>Then, past in the URL of the library and click &#8216;Open&#8217;:</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 &amp; 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>