Tip of the Week: Diagrams as Code

[d33bs]

This PR focuses on creating a new blog post covering Diagrams as Code via Mermaid. As part of this work I also created a new repo implementing JupyterLite under https://github.com/CU-DBMI/notebooks, where a linked notebook example within the blog post content may be found.

Thank you for any feedback, suggestions, or edits you may have!

[netlify[bot]]

✅ Deploy Preview for set-website ready!

Name	Link
🔨 Latest commit	fb0979d16a7f4827283da472edef780fef24ae13
🔍 Latest deploy log	https://app.netlify.com/sites/set-website/deploys/638a2e391a91c60008b444e1
😎 Deploy Preview	https://deploy-preview-7--set-website.netlify.app/2022/11/27/diagrams-as-code
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[vincerubinetti]

Writing looks good. My only thoughts:

• Maybe you could actual use Mermaid in this post for the figures that warrant it? The script is quite big, so I'd just include on this page only (see below).
• For the non-diagram figures, I think you could increase the resolution 2x, and also make them transparent backgrounds.

https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted?id=_3-calling-the-javascript-api

Haven't tested this:

graph TD A[Client] --> B[Load Balancer] B --> C[Server01] B --> D[Server02]

{:.mermaid}

☝️ this "attach class" sequence might have to go on the same line as the code block close, not sure.

OR, if that doesn't work:

<pre class="mermaid">
  graph TD 
  A[Client] --> B[Load Balancer] 
  B --> C[Server01] 
  B --> D[Server02]
</pre>

<script type="module">
  import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>

Should be able to do it with the same two-col component approach.

[d33bs]

Thank you @vincerubinetti ! I'll see about addressing your comments with a few updates.