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 property. 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.
@(Html.DevExtreme().Diagram()
.ID("diagram")
.CustomShapes(cs => {
cs.Add()
.Category("hardware")
.Type("internet")
.Title("Internet")
.BackgroundImageUrl(Url.Content("~/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("~/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("~/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("~/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("~/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("~/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("~/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("~/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("~/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("~/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("~/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("~/Content/SampleData/diagram-hardware.json")",
dataType: "text",
success: function(data) {
$("#diagram").dxDiagram("instance").import(data);
}
});
});
</script>
using System.Web.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
namespace DevExtreme.MVC.Demos.Controllers {
public class DiagramController : Controller {
public ActionResult CustomShapesWithIcons() {
return View();
}
}
}#diagram {
height: 900px;
}