Data Visualization ▸ UI Customization

@(Html.DevExtreme().Diagram()
    .ID("diagram")
    .ContextMenu(cm => cm
        .Enabled(true)
        .Commands(new[] {
            DiagramCommand.BringToFront,
            DiagramCommand.SendToBack,
            DiagramCommand.Lock,
            DiagramCommand.Unlock
        })
    )
    .ContextToolbox(ct => ct
        .Enabled(true)
        .Category(DiagramShapeCategory.Flowchart)
        .ShapeIconsPerRow(5)
        .Width(200)
    )
    .PropertiesPanel(pp => pp
        .Visibility(DiagramPanelVisibility.Visible)
        .Tabs(t => {
            t.Add()
                .Groups(g => {
                    g.Add()
                        .Title("Page Properties")
                        .Commands(new[] { DiagramCommand.PageSize, DiagramCommand.PageOrientation, DiagramCommand.PageColor });
                });
        })
    )
    .HistoryToolbar(tb => tb
        .Visible(false)
    )
    .ViewToolbar(tb => tb
        .Visible(true)
    )
    .MainToolbar(tb => tb
        .Visible(true)
        .Commands(cmds => {
            cmds.Add().Name(DiagramCommand.Undo);
            cmds.Add().Name(DiagramCommand.Redo);
            cmds.Add().Name(DiagramCommand.Separator);
            cmds.Add().Name(DiagramCommand.FontName);
            cmds.Add().Name(DiagramCommand.FontSize);
            cmds.Add().Name(DiagramCommand.Separator);
            cmds.Add().Name(DiagramCommand.Bold);
            cmds.Add().Name(DiagramCommand.Italic);
            cmds.Add().Name(DiagramCommand.Underline);
            cmds.Add().Name(DiagramCommand.Separator);
            cmds.Add().Name(DiagramCommand.FontColor);
            cmds.Add().Name(DiagramCommand.LineColor);
            cmds.Add().Name(DiagramCommand.FillColor);
            cmds.Add().Name(DiagramCommand.Separator);
            cmds.Add().Name("clear").Text("Clear Diagram").Icon("clearsquare");
        })
    )
    .Toolbox(tb => tb
        .Visibility(DiagramPanelVisibility.Visible)
        .Groups(g => {
            g.Add().Category(DiagramShapeCategory.General).Title("General");
            g.Add().Category(DiagramShapeCategory.Flowchart).Title("Flowchart").Expanded(true);
        })
        .ShowSearch(false)
        .ShapeIconsPerRow(4)
        .Width(220)
    )
    .OnCustomCommand(@<text>
        function(e) {
            if(e.name === "clear") {
                var result = DevExpress.ui.dialog.confirm("Are you sure you want to clear the diagram? This action cannot be undone.", "Warning");
                result.done(
                    function(dialogResult) {
                        if(dialogResult) {
                            e.component.import("");
                        }
                    }
                );
            }
        }
    </text>)
)

<script type="text/javascript">
    $(function () {
        $.ajax({
            url: "@Url.Content("~/Content/SampleData/diagram-flow.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 UICustomization() {
            return View();
        }

    }
}

#diagram {
    height: 900px;
}