finos / finos/architecture-as-code

Ability to import SVG into CALM VS Code Plugin

Open
#3,025 0 comments 0 reactions 0 assignees View on GitHub
Roadmap Group: CALM Tools Roadmap: Now
Dominant language
TypeScript
Stars
399
Forks
138
Avg merge
2d 6h
Merged PRs (30d)
38

Description

## Feature Proposal

### Target Project:
####VS Code CALM Plugin

### Description of Feature:
Introduce a capability within the VS Code CALM Plugin to import SVG-based architecture diagrams and automatically bootstrap a CALM JSON model from the SVG content.

Many architecture and diagramming tools, including Draw.io and Visio, support exporting diagrams as SVG. Since SVG is XML-based and machine-readable, it provides a standardized interchange format that can be leveraged to extract architectural entities, relationships, metadata, and layout information.

This feature will significantly accelerate CALM adoption and migration efforts by allowing users to reuse existing architecture diagrams rather than manually recreating them as CALM JSON definitions.

Iteration 1 will focus on Draw.io-generated SVG files. The solution should be designed following the Open/Closed Principle, enabling future extensions to support additional diagramming tools such as Microsoft Visio, Lucidchart, and other SVG-exporting platforms with minimal changes to the core framework.

### User Stories:
1.As an Enterprise Architect, I want to import an existing Draw.io architecture diagram into the CALM VS Code Plugin so that I can quickly generate a CALM model without manually recreating it.
1.As a Solution Architect, I want the plugin to interpret SVG elements and relationships so that I can accelerate migration of legacy architecture artifacts into the CALM ecosystem.
1.As a Developer, I want a generated CALM JSON file from imported SVG content so that I can immediately refine and enhance the model using existing CALM tooling.
1.As a Platform Owner, I want the SVG import framework to support future diagramming tools through pluggable parsers so that new migration scenarios can be added without redesigning the solution.

### Current Limitations:
Currently, CALM model creation requires users to manually author JSON files or generate them through existing CALM workflows. Organizations with large inventories of architecture diagrams cannot efficiently migrate these artifacts into CALM.

Although most diagramming tools provide SVG export capabilities, there is no mechanism within the CALM VS Code Plugin to consume SVG content and translate it into CALM constructs. As a result:

1.Existing architecture assets cannot be reused directly.
1.Large-scale migrations require significant manual effort.
1.CALM adoption is slowed due to migration overhead.
1.No extensible framework exists for diagram-to-CALM conversion.

### Proposed Implementation:
- Technical design considerations

1.Introduce an SVG Import Framework within the VS Code CALM Plugin.
1.Parse SVG XML documents using a standardized SVG processing layer.
1.Implement a provider-based architecture for tool-specific parsing logic.
1.Create a canonical intermediate representation between SVG content and CALM JSON generation.
1.Preserve architectural relationships whenever they can be reliably inferred from SVG metadata.
####Iteration 1 Scope (Draw.io Support)
1.Support Draw.io exported SVG files.
1.Parse Draw.io-specific metadata embedded within SVG elements.
1.Identify:
-Nodes/components
-Containers/groups
-Relationships/connectors
-Labels and annotations
1.Generate an initial CALM JSON model from extracted entities and relationships.
1.Surface validation warnings for unsupported or ambiguous constructs.

- API changes (if applicable)
- Data model changes (if applicable)
- Dependencies on other components

### Alternatives Considered:
...what other approaches were considered and why were they rejected?

### Testing Strategy:
...how will this feature be tested? Include unit, integration, and any other testing considerations...

### Documentation Requirements:
...what documentation will need to be created or updated?

### Implementation Checklist:
- [ ] Design reviewed and approved
- [ ] Implementation completed
- [ ] Tests written and passing
- [ ] Documentation updated
- [ ] Relevant workflows updated (if needed)
- [ ] Performance impact assessed

### Additional Context:
...add any other context, diagrams, mockups, or screenshots about the feature request here...

Contributor guide

Open the contributing guide

Research direction

Start by locating the VS Code CALM Plugin entry points and existing CALM JSON generation workflow, then review how Draw.io SVG metadata can be parsed. Done means a Draw.io SVG import path produces an initial CALM JSON model, reports ambiguous or unsupported constructs, and has tests and documentation covering the supported iteration-one behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
tooling
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Active
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.