Reusable architecture diagrams

with Draw.io + VSCode + GitHub + MARP

Presented by: Tommy Falgout

My Goal

By end of this session you will, not just learn about, but be interested in using these processes and tools to help you make a bigger impact in your career.

Agenda

  • The Gift of Your Keystrokes
  • Technology
  • Live Demo

Our Time Is Limited

5.1CPW * 50WPM * 60m/hr * 6hr/s a day * 5 days/wk * 50 wks/year * 44yrs = 1,009,800,000 keystrokes left in your hands

  • Effectiveness vs. Efficiency
    • When we reply via email, we reach 1-10 people
    • If we expand reach (e.g. blog), we can increase impact
  • Focus on ROI of the limited keystrokes

diagrams.net (aka draw.io)

  • Open Source Diagram Software
  • Integrates with: Teams, G-Drive, Confluence, GitHub
  • Import Shapes: Azure, AWS, UML
  • Suports: Browser, Native App, VSCode

VS Code

  • File Editor
  • Vast plugin ecosystem

GitHub

  • Version Control as a Service
  • Works best for text, NOT binary
  • Uses Markdown for documentation

MARP - Markdown Presentation

Putting It All Together

  • Use Draw.io to create diagrams
  • Use VSCode to create documentation
  • Use Marp to present
  • Use Github to store and version control

Case Study

Partner Requirements

  • SaaS Offer
  • AKS
  • Microservices
  • K8S Ingress
  • Private Link across Tenants

VSCode + Draw.io

Example of VS Code with Draw.io

GitHub + Markdown

Example of GitHub page with text and image from Draw.io

HINT: Does this look familiar?

Blog

Maximize your keystrokes!

Example of blog

Draw.io Tips and Tricks

Add More Shapes

Add Azure Shapes

Other shapes include:

  • Other Clouds (AWS/GCP/IBM)
  • VMWare
  • Office
  • Network
  • Logic Gates

Important to know

  • Draw.io works in layers
  • Click X on shape to add connectors
  • Double-click on shape to add text
  • Click any blank area to add text
    • Can add text to connectors
  • Zoom and pan with mouse

Quick start guide

Style Recommendations

  • Draw containers from large (back) to small (front)
  • Example:
    • Tenant
    • Subscription
    • Vnet
    • Subnet
    • AKS
  • Place icon in top left

DEMO TIME

F-IT! Let's do it live!

Volunteers?

  • Walk me through your
    • Example architecture
    • Azure based
  • I'll draw your architecture

Thanks for attending!

Let me know how this impacts you!

Tommy Falgout

Cloud Solution Architect

We've heard there are 525,600 minutes in a year. Convert that time to keystrokes, what are you doing with them? effectiveness - aka: impact Makes for good connect-glitter to showcase your impact.

Under the hood, draw.io diagrams are XML

Meta screenshot. Me editing this presentation

Had ~800 views from this. WAY more than the 10 people I would have reached if I had just responded. YES, took more time. But if you can do this consistently, it gets easier. Builds good muscle.

I assume you know how to write markdown and how to post a blog.