Skip to main content
Version: Summer 2025 Forward with Her Program

Draw.io Professional Design

Introduction to Draw.io​

Draw.io (now called diagrams.net) is a powerful online diagramming tool that is completely free and requires no registration. It provides a rich graphics library and professional drawing features, suitable for creating various complex professional diagrams.

Core Advantages​

  • Completely Free: All features are free to use, no paywall
  • No Registration Required: Open and use, protects privacy
  • Multi-platform Support: Web, desktop, VS Code plugin
  • Rich Templates: Built-in numerous professional templates
  • Multi-format Export: Supports PNG, SVG, PDF, XML, and other formats
  • Real-time Collaboration: Supports team collaborative editing

Quick Start​

Access Methods​

Online Version​

Visit app.diagrams.net Features: No installation needed, cloud storage

Desktop Application​

Download Desktop Version Features: Offline use, better performance

VS Code Plugin​

Extension name: Draw.io Integration Features: Integrated development environment

Interface Introduction​

Workspace Layout​

1. Shapes Panel (Left)​

  • Basic shapes
  • Advanced graphics library
  • Custom shapes
  • Search function

2. Canvas Area (Center)​

  • Main drawing area
  • Grid and alignment guides
  • Zoom and pan
  • Page management

3. Format Panel (Right)​

  • Style settings
  • Text formatting
  • Arrange and align
  • Layer management

System Architecture Diagram Creation​

Microservices Architecture Diagram​

Architecture Diagram Design Principles​

  1. Clear Hierarchy: Use different colors and areas to divide layers
  2. Clear Connections: Use different line types to represent different communication methods
  3. Unified Icons: Use consistent icon styles
  4. Complete Annotations: Add necessary text descriptions
  • API Gateway: #2E86AB
  • Business Services: #A23B72
  • Data Layer: #F18F01
  • Message Queue: #C73E1D

Network Topology Diagram​

Enterprise Network Architecture​

Design Elements​

Network Devices​
  • Routers
  • Switches
  • Firewalls
  • Load balancers
Security Zones​
  • DMZ zone
  • Internal network
  • Core zone
  • Management zone
Connection Types​
  • Fiber connection
  • Ethernet
  • Wireless connection
  • VPN tunnel
AI-Assisted Design

Use Gemini CLI to generate network topology design solutions:

You: Help me design a network topology structure for a medium-sized enterprise

Gemini: I'll design a medium-sized enterprise network topology for you:

🌐 Network Architecture Design:

1. Internet Access Layer
 - Dual ISP access (primary/backup redundancy)
 - Border routers × 2
 - DDoS protection devices

2. DMZ Zone
 - Web server cluster
 - Mail server
 - FTP server
 - Reverse proxy

3. Core Layer
 - Core switches (dual hot standby)
 - VRRP/HSRP configuration
 - 10G backbone network

4. Aggregation Layer
 - Department aggregation switches
 - VLAN segmentation
 - QoS policies

5. Access Layer
 - Access switches
 - Wireless APs
 - IP phones

6. Server Zone
 - Application servers
 - Database servers
 - File servers
 - Backup servers

7. Security Devices
 - Next-generation firewall
 - IDS/IPS
 - Bastion host
 - Log auditing

IP Address Planning:
- DMZ: 192.168.100.0/24
- Servers: 192.168.10.0/24
- Office network: 192.168.20.0/23
- Guest network: 192.168.200.0/24

UML Diagrams​

Use Case Diagram​

Drawing Steps​

  1. Add Actors: Drag Actor from UML graphics library
  2. Create Use Cases: Use ellipse to represent use cases
  3. Establish Associations: Connect actors and use cases
  4. Add Relationships: include, extend, generalization

Activity Diagram​

Key Elements​

  • Start Node: Filled circle
  • Activity Node: Rounded rectangle
  • Decision Node: Diamond
  • Parallel Processing: Fork/join bars
  • End Node: Double circle

Style and Theme Customization​

Create Custom Styles​

Professional Color Templates​

Technical Documentation: #1e3a8a, #3b82f6, #93c5fd, #dbeafe

Business Presentation: #059669, #10b981, #fbbf24, #f3f4f6

Collaboration Features​

Team Collaboration​

Generate read-only or editable links

Version Control​

Integration with GitHub/GitLab

Comment Feature​

Add annotations and feedback

Real-time Sync​

Multiple people editing simultaneously

Export and Integration​

Export Formats​

Image Formats​
  • PNG (transparent background)
  • JPG (compressed image)
  • SVG (vector graphics)
  • WebP (web-optimized)
Document Formats​
  • PDF (printing)
  • HTML (web embedding)
  • XML (source file)
  • VSDX (Visio)

Integration Methods​

<!-- Embed Draw.io diagram in webpage -->
<iframe
src="https://viewer.diagrams.net/?highlight=0000ff&edit=_blank&layers=1&nav=1&title=diagram.drawio#Uhttps%3A%2F%2Fdrive.google.com%2Ffile%2Fd%2F..."
width="100%"
height="600">
</iframe>

Professional Tips​

Improve Efficiency​

  • Master keyboard shortcuts
  • Use search function to quickly find shapes
  • Create commonly used element libraries
  • Batch operation techniques

Maintain Consistency​

  • Define color specifications
  • Unify font sizes
  • Keep spacing consistent
  • Use style copying

Professional Layout​

  • Use grid alignment
  • Maintain golden ratio
  • The art of whitespace
  • Visual hierarchy design

Next Steps​

After mastering Draw.io, continue learning:

Scenario Application Guide →

AI-Assisted Creation →