Overview:

PlantUML Editor 2 is a versatile tool that allows users to create and edit PlantUML diagrams online. This demo client supports Vue 3 and TypeScript with features like Vite for quick setup and Vitest for running unit tests. The editor integrates with Mermaid as well, providing users with added flexibility. It includes recommended IDE setups for VSCode and details on how to enhance performance using Volar and vue-tsc for type checking.

Features:

• PlantUML Support: Create and edit PlantUML diagrams online
• Vue 3 Integration: Supports Vue 3 for web development projects
• TypeScript Compatibility: Utilize TypeScript for type-safe development
• Vite Integration: Quick project setup with Vite for efficient development
• Vitest for Testing: Run unit tests seamlessly with Vitest
• Mermaid Integration: Option to use Mermaid for additional diagramming capabilities
• IDE Recommendation: VSCode with Volar and TypeScript Vue Plugin for enhanced development

Installation:

1. To install PlantUML Editor 2, follow these steps:

   git clone https://github.com/kkeisuke/mermaid-editor
   cd mermaid-editor
   npm install
   npm run dev
   

2. For recommended IDE setup:
   • Install VSCode
   • Install Volar extension
   • Disable Vetur
   • Install TypeScript Vue Plugin (Volar)
   • For improved performance:
     1. Disable built-in TypeScript Extension
     2. Reload VSCode window
     3. Enable Take Over Mode in Volar

Summary:

PlantUML Editor 2 is a feature-rich tool that facilitates the creation and editing of PlantUML diagrams online. With support for Vue 3, TypeScript, Vite, and Vitest, developers can streamline their development workflow. Integrations like Mermaid expand diagramming options, while the recommended IDE setup enhances the overall development experience. By following the installation guide and tweaking configurations, users can leverage the full potential of this editor for their projects.