docs(vscode/diagram-editor): explain plans

Author: urish

docs/vscode/diagram-editor.md

@@ -0,0 +1,22 @@
+---
+title: Diagram Editor in VS Code
+sidebar_label: Diagram Editor
+---
+
+# Diagram Editor in VS Code
+
+The visual diagram editor in Wokwi for VS Code allows you to edit the diagram of your simulation project. It is available in the [Hobby+ and Pro plans](https://wokwi.com/pricing).
+
+## Opening the diagram editor
+
+To open the diagram editor, click on a diagram.json file in the Explorer view. The diagram will open in a new tab. The diagram editor also works for files matching the `diagram.*.json` pattern, such as `diagram.esp32.json`. This is useful if you have multiple target boards in your project, and want to maintain a diagram for each target board.
+
+If you are using the Community or the Hobby plan, you will be able to view the diagram, but not edit it in the diagram editor. You can still edit the diagram.json file in the text editor.
+
+## Editing the diagram as text
+
+Some advanced features are only available if you modify the diagram in the text editor. You can open the text editor by right clicking on the diagram.json tab, selecting "Reopen Editor With..." and then selecting "Text Editor".
+
+## Running the simulation
+
+You can run the simulation by pressing the green play button in the top left corner of the editor. Wokwi will open a new tab and start the simulation.

sidebars.js

@@ -88,6 +88,7 @@ module.exports = {
     'VS Code Extension': [
       'vscode/getting-started',
       'vscode/project-config',
+      'vscode/diagram-editor',
       'vscode/debugging',
       'vscode/offline-mode',
     ],