Component Model Viewer

This page demonstrates rendering component-and-connector diagrams in PaperScape. The example below loads the `example-component-model.cmv.json` file and renders each component as a card with its connectors.

Drag the link onto the PaperScape canvas to embed this viewer as a reusable scene component.

Component Model View PaperScape App (.giraffe.js) Send via PaperScape Queue

Models

Inside PaperScape, click a component card to open the editing panel where you can rename the component, adjust its description, and add/remove connectors.

Drop `.cmv.json` files or URLs directly onto the PaperScape canvas to load models; choose _Import_ to merge or _Replace_ to swap the scene.

PaperScape Controls

• Save Model – persists the current scene to a configured `.cmv.json` file path (and PaperScape's browser autosave).
• Open Model – launches a file picker for `.cmv.json` files; choose _Import_ to merge or _Replace_ to overwrite the current canvas.
• Download – saves the active model JSON locally, defaulting to `component-model.cmv.json`.
• New Model – scaffolds a blank component model with helper dialogs that ensure the filename ends in `.cmv.json`.

• All file operations expect filenames ending in `.cmv.json`; PaperScape shows a warning if a different suffix is supplied.

  *

PaperScape Editing Roadmap

Goal: turn the Component Model view into a lightweight UML Component diagram editor inside PaperScape.

✅ Recently Completed

• Base rendering of component cards plus connector arrows.
• `.cmv.json` drag-and-drop integration with PaperScape import/replace workflows.
• File operations wired to OpenForum's `loadJSON` / `saveFile` helpers.

🚧 In Progress

• Inline interface editing (provided/required lists on each component).
• Port decorators (lollipop/sockets) for visualising required vs provided contracts.

🗺️ Upcoming

• Component palettes (edge, presentation, service, domain, platform) with quick styling.
• Connector routing helpers to avoid overlaps when scenes grow beyond 20 components.
• Exporters for PlantUML and Mermaid component diagrams.
• Impact analysis highlighting downstream components when one is selected.

The canvas renders each component as a rounded rectangle showing the title, description, layer, and interface badges. Connectors draw arrows between components with optional labels (e.g., "calls", "publishes"). Update the JSON file and refresh to see changes—no manual markup edits required.