Jekyll2020-01-26T18:13:57+00:00https://eduardomourar.github.io/feed.xmleduardomourar.github.ioDraw.io - Azure Isometric Diagram2018-10-28T00:00:00+00:002018-10-28T00:00:00+00:00https://eduardomourar.github.io/2018/10/28/drawio-azure-isometric-diagram<h1 id="drawio---azure-isometric-diagram">Draw.io - Azure Isometric Diagram</h1>
<p class="meta">28 Oct 2018 - Hilversum, Netherlands</p>
<p>I was wondering how I could create a Draw.io isometric diagram for Azure just like the ones from AWS.</p>
<p><a href="https://www.draw.io/?lightbox=&p=ex1&highlight=0000ff&edit=_blank&layers=1&nav=1&title=AWS%20Diagram.html#Uhttps%3A%2F%2Fdrive.google.com%2Fa%2Fseibert-media.net%2Fuc%3Fid%3D11X9bDr9dwE16AX7KGx4EkCHtJ9fXtPTw%26export%3Ddownload">
<img src="https://about.draw.io/wp-content/uploads/2017/07/drawio_aws_diagram_1840x900.png" />
</a></p>
<p>So my idea was to have a generic isometric (3D) shape as a container that you could use with shapes or images from other libraries. Therefore, I submitted some small changes to the <a href="https://github.com/jgraph/drawio/pull/340">draw.io github repository</a>.</p>
<p><a href="https://github.com/jgraph/drawio/pull/340">
<img src="/images/posts/2018-10-28/initial-generic-shapes.png" />
</a></p>
<p>You can change the shape style input (e.g. <code class="language-plaintext highlighter-rouge">shape=mxgraph.mscae.cloud.azure_search</code> within container or <code class="language-plaintext highlighter-rouge">indicatorImage=img/lib/mscae/Active_Directory.svg</code>), but it still has a lot of limitations.</p>
<p>This is a simple example of the results:</p>
<p><img src="/images/posts/2018-10-28/serverless-test.svg" /></p>Draw.io - Azure Isometric Diagram