Auto-generated component diagram

The AppMap framework includes JavaScript code which can automatically render visual depictions of AppMap data. This example shows how AppMap data can be displayed as a C4 component diagram.

Check out the Component Diagram »

Components used

This example uses the standard component diagram JavaScript component, which is available in the open source d3-appmap project.


This example shows how to initialize and display a component diagram, providing scenario JSON data and a container DOM element. By following this example, you can display an AppLand component diagram in any web site or application which supports JavaScript. You can use a custom coding environment, or leverage a tool like Observable, CodePen, or JSFiddle.

Data sources

The example uses AppMap data recorded from the open source application if-me, which is a “Free, open source mental health communication web app to share experiences with loved ones.” The data used in this example was recorded from an If-Me test case using the appmap-ruby client, and uploaded to the AppLand sandbox. Since the If-Me application is open source and public on AppLand, the recorded scenario data is freely downloadable.

To obtain the download URL for any scenario, click Properties and then find the Raw data link:

A component diagram view available in the AppLand sandbox for every application. To see the component diagram for if-me, go to and click on the If-Me application. The Component tab will be selected by default, showing an interactive component diagram of the application.

« Back to the code gallery