Сделал элементы согласно нотации, убрал хэш при билде

src/diagram.css

@@ -123,6 +123,45 @@
   line-height: 1;
 }
 
+.diagram-node__subtype-badge {
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  display: inline-flex;
+  line-height: 0;
+  opacity: 0.9;
+}
+
+.diagram-node__event-icon {
+  position: relative;
+  display: inline-flex;
+  line-height: 0;
+}
+
+.diagram-node--data-object-outer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px 8px;
+  box-sizing: border-box;
+}
+
+/*
+ * Folded top-right corner — the classic BPMN Data Object glyph. `clip-path`
+ * establishes its own stacking context, so a later, non-`z-index`d sibling
+ * (the label) doesn't reliably paint on top by DOM order alone — z-index
+ * makes the stacking explicit instead of relying on that.
+ */
+.diagram-node--data-object-bg {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
+}
+
 .diagram-aside {
   width: 340px;
   flex-shrink: 0;
@@ -196,6 +235,25 @@
   outline-offset: 2px;
 }
 
+.node-inspector__subtype {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid color-mix(in srgb, canvastext 25%, transparent);
+  border-radius: 4px;
+  background: canvas;
+  color: canvastext;
+  cursor: pointer;
+}
+
+.node-inspector__subtype--active {
+  border-color: canvastext;
+  background: color-mix(in srgb, canvastext 12%, canvas);
+}
+
 .node-inspector__color-trigger {
   align-self: flex-start;
 }