Diagram - Background Images

The Diagram component provides a collection of built-in shapes. You can extend this collection with custom shapes.

An array of custom shape objects is accessible through the CustomShapes method. For each custom shape object, you can specify the type, background image, default size, text, connection points, and other settings. Note that shape images should be supplied as SVG files.

This demo shows how to populate the shape collection with custom shape types, and how to use custom shapes in the Diagram.

Backend API

​x
 
@(Html.DevExtreme().Diagram()        .ID("diagram")        .CustomShapes(cs => {            cs.Add()                .Category("hardware")                .Type("internet")                .Title("Internet")                .BackgroundImageUrl(Url.Content("~/images/shapes/internet.svg"))                .BackgroundImageLeft(0.15)                .BackgroundImageTop(0)                .BackgroundImageWidth(0.7)                .BackgroundImageHeight(0.7)                .DefaultWidth(0.75)                .DefaultHeight(0.75)                .DefaultText("Internet")                .AllowEditText(true)                .TextLeft(0)                .TextTop(0.7)                .TextWidth(1)                .TextHeight(0.3)                .ConnectionPoints(cp => {                    cp.Add().X(0.5).Y(0);                    cp.Add().X(0.9).Y(0.5);                    cp.Add().X(0.5).Y(1);                    cp.Add().X(0.1).Y(0.5);​                });            cs.Add()                .Category("hardware")                .Type("laptop")                .Title("Laptop")                .BackgroundImageUrl(Url.Content("~/images/shapes/laptop.svg"))                .BackgroundImageLeft(0.15)                .BackgroundImageTop(0)                .BackgroundImageWidth(0.7)                .BackgroundImageHeight(0.7)                .DefaultWidth(0.75)                .DefaultHeight(0.75)                .DefaultText("Laptop")                .AllowEditText(true)                .TextLeft(0)                .TextTop(0.7)                .TextWidth(1)                .TextHeight(0.3)                .ConnectionPoints(cp => {                    cp.Add().X(0.5).Y(0);                    cp.Add().X(0.9).Y(0.5);                    cp.Add().X(0.5).Y(1);                    cp.Add().X(0.1).Y(0.5);                });            cs.Add()                .Category("hardware")                .Type("mobile")                .Title("Mobile")                .BackgroundImageUrl(Url.Content("~/images/shapes/mobile.svg"))                .BackgroundImageLeft(0.15)                .BackgroundImageTop(0)                .BackgroundImageWidth(0.7)                .BackgroundImageHeight(0.7)                .DefaultWidth(0.75)                .DefaultHeight(0.75)                .DefaultText("Mobile")                .AllowEditText(true)                .TextLeft(0)                .TextTop(0.7)                .TextWidth(1)                .TextHeight(0.3)                .ConnectionPoints(cp => {                    cp.Add().X(0.5).Y(0);                    cp.Add().X(0.9).Y(0.5);                    cp.Add().X(0.5).Y(1);                    cp.Add().X(0.1).Y(0.5);                });            cs.Add()                .Category("hardware")                .Type("pc")                .Title("PC")                .BackgroundImageUrl(Url.Content("~/images/shapes/pc.svg"))                .BackgroundImageLeft(0.15)                .BackgroundImageTop(0)                .BackgroundImageWidth(0.7)                .BackgroundImageHeight(0.7)                .DefaultWidth(0.75)                .DefaultHeight(0.75)                .DefaultText("PC")                .AllowEditText(true)                .TextLeft(0)                .TextTop(0.7)                .TextWidth(1)                .TextHeight(0.3)                .ConnectionPoints(cp => {                    cp.Add().X(0.5).Y(0);                    cp.Add().X(0.9).Y(0.5);                    cp.Add().X(0.5).Y(1);                    cp.Add().X(0.1).Y(0.5);                });            cs.Add()                .Category("hardware")                .Type("phone")                .Title("Phone")                .BackgroundImageUrl(Url.Content("~/images/shapes/phone.svg"))                .BackgroundImageLeft(0.15)                .BackgroundImageTop(0)                .BackgroundImageWidth(0.7)                .BackgroundImageHeight(0.7)                .DefaultWidth(0.75)                .DefaultHeight(0.75)                .DefaultText("Phone")                .AllowEditText(true)                .TextLeft(0)                .TextTop(0.7)                .TextWidth(1)                .TextHeight(0.3)                .ConnectionPoints(cp => {                    cp.Add().X(0.5).Y(0);                    cp.Add().X(0.9).Y(0.5);                    cp.Add().X(0.5).Y(1);                    cp.Add().X(0.1).Y(0.5);                });            cs.Add()                .Category("hardware")                .Type("printer")                .Title("Printer")                .BackgroundImageUrl(Url.Content("~/images/shapes/printer.svg"))                .BackgroundImageLeft(0.15)                .BackgroundImageTop(0)                .BackgroundImageWidth(0.7)                .BackgroundImageHeight(0.7)                .DefaultWidth(0.75)                .DefaultHeight(0.75)                .DefaultText("Printer")                .AllowEditText(true)                .TextLeft(0)                .TextTop(0.7)                .TextWidth(1)                .TextHeight(0.3)                .ConnectionPoints(cp => {                    cp.Add().X(0.5).Y(0);                    cp.Add().X(0.9).Y(0.5);                    cp.Add().X(0.5).Y(1);                    cp.Add().X(0.1).Y(0.5);                });            cs.Add()                .Category("hardware")                .Type("router")                .Title("Router")                .BackgroundImageUrl(Url.Content("~/images/shapes/router.svg"))                .BackgroundImageLeft(0.15)                .BackgroundImageTop(0)                .BackgroundImageWidth(0.7)                .BackgroundImageHeight(0.7)                .DefaultWidth(0.75)                .DefaultHeight(0.75)                .DefaultText("Router")                .AllowEditText(true)                .TextLeft(0)                .TextTop(0.7)                .TextWidth(1)                .TextHeight(0.3);            cs.Add()                .Category("hardware")                .Type("scaner")                .Title("Scaner")                .BackgroundImageUrl(Url.Content("~/images/shapes/scaner.svg"))                .BackgroundImageLeft(0.15)                .BackgroundImageTop(0)                .BackgroundImageWidth(0.7)                .BackgroundImageHeight(0.7)                .DefaultWidth(0.75)                .DefaultHeight(0.75)                .DefaultText("Scaner")                .AllowEditText(true)                .TextLeft(0)                .TextTop(0.7)                .TextWidth(1)                .TextHeight(0.3)                .ConnectionPoints(cp => {                    cp.Add().X(0.5).Y(0);                    cp.Add().X(0.9).Y(0.5);                    cp.Add().X(0.5).Y(1);                    cp.Add().X(0.1).Y(0.5);                });            cs.Add()                .Category("hardware")                .Type("server")                .Title("Server")                .BackgroundImageUrl(Url.Content("~/images/shapes/server.svg"))                .BackgroundImageLeft(0.15)                .BackgroundImageTop(0)                .BackgroundImageWidth(0.7)                .BackgroundImageHeight(0.7)                .DefaultWidth(0.75)                .DefaultHeight(0.75)                .DefaultText("Server")                .AllowEditText(true)                .TextLeft(0)                .TextTop(0.7)                .TextWidth(1)                .TextHeight(0.3)                .ConnectionPoints(cp => {                    cp.Add().X(0.5).Y(0);                    cp.Add().X(0.9).Y(0.5);                    cp.Add().X(0.5).Y(1);                    cp.Add().X(0.1).Y(0.5);                });            cs.Add()                .Category("hardware")                .Type("switch")                .Title("Switch")                .BackgroundImageUrl(Url.Content("~/images/shapes/switch.svg"))                .BackgroundImageLeft(0.15)                .BackgroundImageTop(0)                .BackgroundImageWidth(0.7)                .BackgroundImageHeight(0.7)                .DefaultWidth(0.75)                .DefaultHeight(0.75)                .DefaultText("Switch")                .AllowEditText(true)                .TextLeft(0)                .TextTop(0.7)                .TextWidth(1)                .TextHeight(0.3)                .ConnectionPoints(cp => {                    cp.Add().X(0.5).Y(0);                    cp.Add().X(0.9).Y(0.5);                    cp.Add().X(0.5).Y(1);                    cp.Add().X(0.1).Y(0.5);                });            cs.Add()                .Category("hardware")                .Type("wifi")                .Title("Wi Fi Router")                .BackgroundImageUrl(Url.Content("~/images/shapes/wifi.svg"))                .BackgroundImageLeft(0.15)                .BackgroundImageTop(0)                .BackgroundImageWidth(0.7)                .BackgroundImageHeight(0.7)                .DefaultWidth(0.75)                .DefaultHeight(0.75)                .DefaultText("Wi Fi")                .AllowEditText(true)                .TextLeft(0)                .TextTop(0.7)                .TextWidth(1)                .TextHeight(0.3)                .ConnectionPoints(cp => {                    cp.Add().X(0.5).Y(0);                    cp.Add().X(0.9).Y(0.5);                    cp.Add().X(0.5).Y(1);                    cp.Add().X(0.1).Y(0.5);                });        })        .Toolbox(tb => tb            .Groups(g => g.Add().Category("hardware").Title("Hardware"))        ))​<script type="text/javascript">    $(function () {        $.ajax({            url: "@Url.Content("~/SampleData/diagram-hardware.json")",            dataType: "text",            success: function(data) {                $("#diagram").dxDiagram("instance").import(data);            }        });    });</script>​​

xxxxxxxxxx
 
using DevExtreme.NETCore.Demos.Models.SampleData;using Microsoft.AspNetCore.Mvc;​namespace DevExtreme.NETCore.Demos.Controllers {    public class DiagramController : Controller {        public IActionResult CustomShapesWithIcons() {            return View();        }    }}

xxxxxxxxxx
 
#diagram {    height: 900px;}