Feature/bump-zenuml-core-version (#6)

* chore(package.json): update @zenuml/core to version 3.24.5

* feat: ⬆️ upgrade zenumo-core dependency

* feat: 💄 add new themes and render mode options to configuration

* docs: 📝 add demo gif to README.md. Improve usage description

* chore: update Node.js version to 18 in release, main workflow and package.json

* docs: update file extensions in README.md and improve usage description

* chore: update Node.js and @types dependencies in package.json

.github/workflows/main.yml

@@ -13,7 +13,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
       - name: Install dependencies
         run: npm install --save-exact
       - name: Linting

.github/workflows/release.yml

@@ -15,7 +15,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
       - name: Install dependencies
         run: npm install --save-exact
       - name: Publish to Visual Studio Marketplace

README.md

@@ -1,27 +1,35 @@
-#  ![img](assets/zenuml-icon.png) ZenUML VSCode Extension
+# ![img](assets/zenuml-icon.png) ZenUML VSCode Extension
+
 The ZenUML VSCode Extension is a powerful tool that allows you to create sequence diagrams in your VSCode editor. With this extension, you can write ZenUML code and instantly see a rendered sequence diagram that visualizes your code.
 
+![Demo](assets/demo.gif)
+
 ## Features
+
 - Render ZenUML code to a sequence diagram
 - Hot loading for instant visualization updates as you write code
 
 ## Installation
+
 To install the ZenUML VSCode Extension, follow these steps:
+
 1. Open VSCode.
 2. Open the Extension Marketplace by clicking on the Extensions icon in the left-hand side menu.
 3. Search for "ZenUML" and click "Install."
 4. Once the installation is complete, the ZenUML extension will be available in your VSCode editor.
 
 ## Usage
+
 To use the ZenUML VSCode Extension, follow these steps:
-1. Open a new or existing file in your VSCode editor.
-Write ZenUML code in the file.
-2. Press CTRL+SHIFT+P or CMD+SHIFT+P to open the command palette.
-3. Search for "ZenUML: Preview" and select it.
+
+1. Open a new or existing file with a `.zen` or `.zenuml` file extension. Write ZenUML code in the file.
+2. Press <kbd>CTRL</kbd>+<kbd>SHIFT</kbd>+<kbd>P</kbd> or <kbd>CMD</kbd>+<kbd>SHIFT</kbd>+<kbd>P</kbd> to open the command palette.3. Search for `ZenUML: Preview` and select it.
 4. A preview window will open, displaying the rendered sequence diagram based on your ZenUML code.
 
 ## Contributing
+
 If you encounter any issues or bugs with the ZenUML VSCode Extension, please report them on the GitHub repository. Pull requests are also welcome.
 
 ## License
-The ZenUML VSCode Extension is licensed under the MIT License. See the LICENSE file for more information.
+
+The ZenUML VSCode Extension is licensed under the MIT License. See the LICENSE file for more information.