Angular App to Draw and Design Cloud Architecture Diagrams
Budget: $10 – $30 USD
Hi,
Need Angular App to Create and Design Cloud Architecture Diagrams :
Objective :
- Use Angular Latest stable version.
- AWS Services as Diagram components for the First example.
Diagram :
- Drag and drop Components.
- Add/Edit Label Per Component.
- Create/Edit/Delete Links Between Components with Labels.
- Create/Edit/Delete Frames to Group Components with a label.
Controls :
- Frames and Links Should support list of types and styles :
- Solid , Dashed , Dotted lines ...
- Line size control by pixels : 1px,2px ....
Model :
- Well Defined Object Model to represent the viewed Architecture Structure to save to remote database later.
- On each change on the board update the object view model.
- Show the Object Model on console to validate the defined schema.
See Examples :
- https://d2908q01vomqb2.cloudfront.net/fc074d501302eb2b93e2554793fcaf50b3bf7291/2022/09/29/Figure-1.-Launchmetrics-backend-architecture-1024x482.png
- https://e476rzxxeua.exactdn.com/wp-content/uploads/2020/05/Solution-Architecture.jpg?strip=all&lossy=1&sharp=1&fit=960%2C740&ssl=1
- https://d2908q01vomqb2.cloudfront.net/fc074d501302eb2b93e2554793fcaf50b3bf7291/2021/07/01/Figure-1.-RStudio-Shiny-Open-Source-Deployment-on-AWS-Serverless-Infrastructure.png
Need Angular App to Create and Design Cloud Architecture Diagrams :
Objective :
- Use Angular Latest stable version.
- AWS Services as Diagram components for the First example.
Diagram :
- Drag and drop Components.
- Add/Edit Label Per Component.
- Create/Edit/Delete Links Between Components with Labels.
- Create/Edit/Delete Frames to Group Components with a label.
Controls :
- Frames and Links Should support list of types and styles :
- Solid , Dashed , Dotted lines ...
- Line size control by pixels : 1px,2px ....
Model :
- Well Defined Object Model to represent the viewed Architecture Structure to save to remote database later.
- On each change on the board update the object view model.
- Show the Object Model on console to validate the defined schema.
See Examples :
- https://d2908q01vomqb2.cloudfront.net/fc074d501302eb2b93e2554793fcaf50b3bf7291/2022/09/29/Figure-1.-Launchmetrics-backend-architecture-1024x482.png
- https://e476rzxxeua.exactdn.com/wp-content/uploads/2020/05/Solution-Architecture.jpg?strip=all&lossy=1&sharp=1&fit=960%2C740&ssl=1
- https://d2908q01vomqb2.cloudfront.net/fc074d501302eb2b93e2554793fcaf50b3bf7291/2021/07/01/Figure-1.-RStudio-Shiny-Open-Source-Deployment-on-AWS-Serverless-Infrastructure.png