# Using the VS Code extension

## Installing the VS code extension

1. Search for the [Eraser extension](https://marketplace.visualstudio.com/items?itemName=EraserLabs.eraserlabs) 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](/cloud-architecture-diagrams)
  * [Entity Relationship Diagrams (ERD)](/entity-relationship-diagrams)
  * [Sequence Diagrams](/sequence-diagrams)
  * [Flow Charts](/flow-charts)