Identity · network badges
Raster and icon badges reserve space beside node labels on a white canvas
Preparing the evidence view…
Complete example JSON
{
"title": "Delivery dependencies",
"insight": "The API connects the client to the database",
"dataContext": {
"source": "VSLZ visual identity fixtures",
"synthetic": true
},
"layout": "dagre",
"nodes": [
{
"id": "client",
"label": "Client"
},
{
"id": "api",
"label": "API service"
},
{
"id": "db",
"label": "Database"
}
],
"edges": [
{
"source": "client",
"target": "api"
},
{
"source": "api",
"target": "db"
}
],
"visualAssets": {
"version": 1,
"definitions": [
{
"id": "client",
"kind": "image",
"src": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAXUlEQVR4nO3VsQkAIAxEUbdwSAdxWCsLe8E6OWKCBOTg6v+6pIy5nq4QIHBWW9cWBUDayCDAWMeGClzVgSEDjrpmZADuumgQIEDg01PhNsRO3j+4MkAh+yfHRyAf2Hl+rBGQyfWTAAAAAElFTkSuQmCC",
"alt": "Synthetic blue circle badge",
"fit": "contain"
},
{
"id": "server",
"kind": "icon",
"key": "server"
},
{
"id": "store",
"kind": "icon",
"key": "database"
}
],
"bindings": [
{
"target": {
"type": "entity",
"field": "id",
"value": "client"
},
"assetRef": "client",
"placement": "node"
},
{
"target": {
"type": "entity",
"field": "id",
"value": "api"
},
"assetRef": "server",
"placement": "node"
},
{
"target": {
"type": "entity",
"field": "id",
"value": "db"
},
"assetRef": "store",
"placement": "node"
}
]
}
}