Javascript, Charts and Maps (JSON API)

Dragon1 Templates, Charts, and Maps (with Javascript and JSON) is a new feature on Dragon1. You can create or generate a .dragon1 file and upload it to the Viewer. This is a quick and easy way for Enterprise Architecture and Data Visualization.

How does it Work?

Go to the Templates, Charts & Maps demo page at www.dragon1.com/demo.

Next, download a .dragon1 file (it has a JSON internal structure).

Next, open Notepad and the .dragon1 file, or you generate a JSON file from a software system in your company and rename it to .dragon1.

Next, use the blue button to upload your .dragon1 file on the demo page, and see directly the result. Or you upload the file in the Viewer.

This new Dragon1 technology supports you in having to focus only on the quality data and have more time to spend with stakeholders exploring and collecting data (entities and their attributes).

Minimum .dragon1 File

The following JSON placed in a .dragon1 file and uploaded in the viewer on Dragon1, will generate a visualization.

Optionally you can specify one or more modelids or viewids in the visualization:

Download an example frontpage.dragon1 file.

Templates and Layouts

With Dragon1 Charts & Maps you can focus on getting the correct data and then choose a template and layout to get your data generated. Below you see how you specify them:

The templates have many configuration options to tailor them to your likeness. At the bottom of this page is a list of available Templates and Layouts.

Showing Entities on the Dragon1 Architecture Canvas

Download an example entity-on-canvas.dragon1 file.

Note: if no View and Model are specified in the file, all data in the file will be used for the visualization. If an entity has no model specified or no group, the entity will not be visible in a visualization.

An Atlas with Folders and Pages

It is optional to work with a folder structure. A folder can hold pages. a page is a link to a visualization, meta model, model, view, or entity.

You can add folders and pagelinks:

Specifying Models

You can specify models:

If you want to visualize a model directly, you could specify a layout and template to override the default layout and template.

Specifying Views

You can specify views:

If you want to visualize a model directly, you could specify a layout and template to override the default layout and template.

Specifying Relationships

You can specify relationships:

About Layouts

In any visualization you can specify a layout, like this:

"layout": "C5_L01_L03_L02_L04_L01",
...

This layout specification would generate 5 columns from left to right where column 1 has 1 layer, column 2 has 3 layers, column 3 has 2 layers, column 4 has 4 layers and column 5 has 1 layer.

The example screenshot of a Business Capability Heat Map below has specified the following layout: "layout": "L04_C01_C04_C03_C01"

Business Capability heat map.

Download the example file: business-capability-heat-map.dragon1 here.

If you start the layout string with L, Dragon1 will generate a layered layout. If you start with C, Dragon1 will generate a column-based layout. You can specify up to 12 layers and/or 12 columns.

You can also specify a border for the layout:
"layoutborder":"LTRB". This will generate left, top right, and bottom an extra bar.

You can specify a name for every generated group of the layout like this: "group1":"finance", "group2":"IT". Or you can use your data like this: "groups":"function.name". If you have a list of functions, the names of these functions are used for the group names.

Edit Templates

A template consists of a group at a certain position and every group has one or more default entityclasses assigned.

You can change the visual properties of a group like size, position, and color. You can assign one or more different entity classes to the group.

In the visualization JSON data object you add this line:
"group1":{"entityclass":"product"},

Now instead of the entities of the default entity class, the entities of the product entity class are shown.

List of Templates

• HTML_CSS
• Front_Page
• Basic_Page
• Application_Landscape
• Architecture_Framework
• Process_Application_Landscape
• Strategy_Map
• Stakeholder_Onion_Diagram
• Enterprise_Blueprint
• Business_Blueprint
• Technology_Roadmap
• Principles_Diagram
• Customer_Journey_Map
• Capabilities_Map
• Concepts_Map
• Applications_Map
• Servers_Map
• Projects_Map
• Functions_Capability_Map
• Use_Case_Diagram

List of Entity Classes

You can use one of the following entity classes.

1. Stakeholder
2. Person
3. Actor
4. Goal
5. Objective
6. Outcome
7. Target
8. Requirement
9. Constraint
10. Meaning

1. Framework
2. Architecture
3. Concept
4. Element
5. Component
6. Principle
7. Pattern
8. Plateau
9. Gap
10. Project
11. Deliverable
12. System
13. Unknown

1. Service
2. Process
3. Value
4. Event
5. Trigger
6. Resource
7. Value
8. Stream
9. Path
10. Plan
11. Interaction
12. Collaboration
13. Function
14. Activity
15. Competence
16. Capability
17. Enterprise
18. Business
19. Application

1. Platform
2. Database
3. Protocol
4. Network
5. Software
6. Device
7. Node
8. Server
9. Interface
10. Connection
11. Zone
12. Environment
13. Network

1. Client
2. Domain
3. Standard
4. Scenario
5. Driver
6. Mission
7. Vision
8. Strategy
9. Assessment
10. Change
11. Motivation
12. Issue

1. Artifact
2. Decision
3. Data
4. Contract
5. Organization
6. Case
7. Object
8. Information
9. Document
10. Reference
11. Group
12. Location

1. Visualization
2. View
3. Model
4. Metamodel
5. Relationship
6. Cabinet
7. Dossier
8. Folder
9. Page

List of Attributes

Every entity class can have its user-defined attributes. The mandatory attributes (per entity class) are:

• id
• name
• class
• type

Optional attributes are:

• image
• name
• owner
• startdate
• enddate

Optional Visualization attributes

• listmax. This determines how long the lists of items in the border of a layout can be.

Contact Us with your Feedback

Do you have feedback, questions, or suggestions? Please email specs@dragon1.com. Emails normally are to be answered within 1 business working day.