Using the VS Code extension

Installing the VS code extension

1. Search for the Eraser extension on the VS Code marketplace
2. "Install" the extension

What is the VS Code extension?

• This extension applies to `.eraserdiagram` files
• Preview Eraser diagrams while editing diagram code
• Create new .eraserdiagram files

Creating a new Eraser diagram file

1. Create an blank file with the .eraserdiagram extension
2. Open the blank file
3. Select among available diagram types
4. Write diagram code (learn diagram-as-code syntax)

Viewing and editing an exiting Eraser diagram file

1. Open an existing .eraserdiagram file. By default, the diagram preview will show.
2. Click on the "Edit" icon to open code editor.
3. Edit diagram code (learn diagram-as-code syntax)

Diagram syntax

• The first line of the diagram code in the .eraserdiagram file determines diagram type, which are:
  • cloud-architecture-diagram
  • entity-relationship-diagram
  • sequence-diagram
  • flow-chart
• Learn the syntax for each diagram type
  • Cloud Architecture Diagrams
  • Entity Relationship Diagrams (ERD)
  • Sequence Diagrams
  • Flow Charts