Skip to content
C# Dev Tools

Tools

Diagrams

Create and manage technical diagrams using the integrated Excalidraw whiteboard.

Overview

Section titled “Overview”

C# Dev Tools includes Excalidraw integration for creating diagrams, flowcharts, and technical illustrations directly in VS Code.

Diagram Types

Section titled “Diagram Types”

Global Diagrams

Section titled “Global Diagrams”

Stored in your user profile, available across all workspaces:

  • Reusable diagrams
  • Personal reference
  • Cross-project documentation
  • Architecture diagrams

Workspace Diagrams

Section titled “Workspace Diagrams”

Stored per workspace under .vscodecsdt/Diagrams at the workspace root:

  • Project-specific diagrams
  • Team collaboration – check the folder into source control to share with the team
  • Context-specific (architecture, flows, etc.)
  • Backward compatibility: existing diagrams from the previous global location (~/.vscode-csharp-dev-tools/diagrams/workspace/) are still readable and shown alongside new ones

Creating Diagrams

Section titled “Creating Diagrams”

New Global Diagram

Section titled “New Global Diagram”
  1. Open Solution Explorer
  2. Expand “Tools” → “Diagrams”
  3. Click “Create Global Diagram”
  4. Enter diagram name
  5. Diagram opens in Excalidraw

New Workspace Diagram

Section titled “New Workspace Diagram”
  1. Open Solution Explorer
  2. Expand “Tools” → “Diagrams”
  3. Click “Create Workspace Diagram”
  4. Enter diagram name
  5. Diagram opens in editor

Excalidraw Features

Section titled “Excalidraw Features”

Drawing Tools

Section titled “Drawing Tools”
  • Shapes: Rectangle, circle, diamond, ellipse
  • Lines: Straight, arrows, curves
  • Text: Labels and annotations
  • Freehand: Hand-drawn elements

Styling

Section titled “Styling”
  • Colors and fills
  • Stroke styles
  • Opacity
  • Font sizes
  • Line types

Organization

Section titled “Organization”
  • Grouping elements
  • Layers
  • Alignment tools
  • Distribution
  • Z-order management

Managing Diagrams

Section titled “Managing Diagrams”

Opening Diagrams

Section titled “Opening Diagrams”
  1. Expand “Diagrams” in Tools section
  2. View global and workspace diagrams
  3. Click to open
  4. Edits save automatically

Renaming Diagrams

Section titled “Renaming Diagrams”
  1. Right-click diagram in tree
  2. Select “Rename”
  3. Enter new name
  4. File is renamed

Deleting Diagrams

Section titled “Deleting Diagrams”
  1. Right-click diagram in tree
  2. Select “Delete”
  3. Confirm deletion
  4. File is removed

Exporting Diagrams

Section titled “Exporting Diagrams”

Export diagrams in various formats:

  • PNG: Raster image
  • SVG: Vector graphics
  • JSON: Excalidraw format

To export:

  1. Open diagram
  2. Use Excalidraw export menu
  3. Choose format
  4. Save file

Version Control

Section titled “Version Control”

Workspace Diagrams

Section titled “Workspace Diagrams”

Workspace diagrams can be version controlled:

  • Stored in .vscodecsdt/Diagrams at the workspace root
  • JSON format for diffing
  • Commit with code changes
  • Share with team

Ignoring Diagrams

Section titled “Ignoring Diagrams”

Add to .gitignore if needed:

.vscodecsdt/Diagrams/

Use Cases

Section titled “Use Cases”

Architecture Documentation

Section titled “Architecture Documentation”
  • System architecture
  • Component diagrams
  • Deployment diagrams
  • Network topology

Flow Charts

Section titled “Flow Charts”
  • Process flows
  • Decision trees
  • Algorithm visualization
  • Workflow documentation

Class Diagrams

Section titled “Class Diagrams”
  • Class relationships
  • Inheritance hierarchies
  • Interface contracts
  • Design patterns

Wireframes

Section titled “Wireframes”
  • UI layouts
  • Screen flows
  • User journeys
  • Mockups

Collaboration

Section titled “Collaboration”

Sharing Diagrams

Section titled “Sharing Diagrams”

Share diagrams with team:

  1. Commit workspace diagrams to repo
  2. Export as PNG/SVG for docs
  3. Use global diagrams as templates
  4. Share JSON files directly

Team Standards

Section titled “Team Standards”

Establish conventions:

  • Naming patterns
  • Color schemes
  • Symbol meanings
  • Diagram types

Tips and Tricks

Section titled “Tips and Tricks”

Keyboard Shortcuts

Section titled “Keyboard Shortcuts”

Excalidraw supports:

  • Ctrl+Z: Undo
  • Ctrl+Y: Redo
  • Ctrl+D: Duplicate
  • Ctrl+G: Group
  • Arrow keys: Move elements

Quick Workflows

Section titled “Quick Workflows”
  • Double-click to add text
  • Hold Shift for straight lines
  • Alt+drag to duplicate
  • Ctrl+drag for constrained movement

Organization

Section titled “Organization”
  • Use layers for complex diagrams
  • Group related elements
  • Name elements for clarity
  • Use consistent colors

Best Practices

Section titled “Best Practices”
  • Keep diagrams focused and simple
  • Use clear labels
  • Maintain consistent style
  • Version control workspace diagrams
  • Export for documentation
  • Update diagrams with code changes

Troubleshooting

Section titled “Troubleshooting”

Diagram Won’t Open

Section titled “Diagram Won’t Open”

If diagram doesn’t open:

  1. Check file exists
  2. Verify file permissions
  3. Try creating new diagram
  4. Check VS Code output for errors

Can’t Save Diagram

Section titled “Can’t Save Diagram”

If save fails:

  1. Check disk space
  2. Verify write permissions
  3. Check file isn’t locked
  4. Try exporting instead

Diagram Corrupted

Section titled “Diagram Corrupted”

If diagram appears corrupted:

  1. Check JSON file syntax
  2. Restore from version control
  3. Create new diagram
  4. Report issue if persistent