Interactive Diagram Editor Module for the Idem Platform
Idem Chart is a specialized module of the Idem platform, designed for editing, previewing, and sharing diagrams. As part of the AI-powered Idem software development lifecycle system, this module specializes in the visualization aspect, enabling developers to create and modify flowcharts, sequence diagrams, and other visual representations of their software architecture.
As part of the Idem ecosystem, this module provides powerful diagram capabilities:
- Interactive Diagram Editor: Edit and preview flowcharts, sequence diagrams, gantt diagrams in real time
- Export Options: Save results as SVG files for easy integration into documentation
- Collaboration Tools: Share diagrams with team members via viewer links
- Version Management: Collaborate through editable diagram links for iterative design
- UML Visualization: Create detailed UML diagrams for system architecture documentation
- Integration Support: Seamlessly integrate with other Idem modules for complete software lifecycle management
- Frontend: Svelte Kit
- Diagram Rendering: Mermaid.js
- Package Manager: pnpm
- Deployment: Netlify
You can try out a live version here.
-
Clone the repository:
git clone https://github.com/yourusername/idem-chart.git cd idem-chart -
Install dependencies:
pnpm install
-
Start the development server:
pnpm dev -- --open
-
Open your browser to view the application at the URL shown in your terminal
docker run --platform linux/amd64 --publish 8000:8080 ghcr.io/idem-js/idem-chartWhen building set the MERMAID_RENDERER_URL build argument to the rendering
service.
Example:
Default ishttps://mermaid.ink.
Set to empty string to disable PNG and SVG links under Actions
When building set the MERMAID_KROKI_RENDERER_URL build argument to your Kroki
instance.
Default is https://kroki.io
Set to empty string to disable Kroki link under Actions
When building set the MERMAID_ANALYTICS_URL build argument to your plausible instance, and MERMAID_DOMAIN to your domain.
Default is empty, disabling analytics.
When building set the MERMAID_IS_ENABLED_MERMAID_CHART_LINKS build argument to true
Default is empty, disabling button to save to Mermaid Chart and promotional banner.
The modal shown on clicking the security link assumes analytics, renderer, Kroki
and Mermaid chart are enabled. You can update it by modifying Privacy.svelte
if you wish.
docker compose up --buildThen open http://localhost:3000
docker build -t idem-js/idem-chart .docker run --detach --name idem-chart --publish 8080:8080 idem-js/idem-chartVisit: http://localhost:8080
docker stop idem-chartpnpm install
pnpm dev -- --openThis app is created with Svelte Kit.
When a PR is created targeting master, it will be built and deployed by Netlify. The URL will be indicated in a Comment in the PR.
Once the PR is merged, it will automatically be released.
To run unit tests for the application:
npm testTo build the application for production:
npm run buildThe build artifacts will be stored in the dist/ directory.
For detailed documentation about using the diagram editor, please visit our wiki.
To learn more about the entire Idem platform and how this module integrates with other components, visit the main Idem documentation.
We welcome contributions! Please see our Contributing Guide for more details on how to get involved.
This project adheres to a Code of Conduct. By participating, you are expected to uphold this code.
Idem is licensed under the MIT License - see the LICENSE file for details.
[List core team members here]
- [List libraries, tools, and resources that helped build Idem]
- [List contributors and supporters]
Built with ❤️ by the Idem team