canvas_erd 0.1.0 → 0.3.0

data/lib/canvas_erd/web/app.js

@@ -19,7 +19,81 @@ const noticeElement = document.querySelector("#notice");
 const shortcutHelpButton = document.querySelector("#shortcut-help");
 const shortcutPanelElement = document.querySelector("#shortcut-panel");
 const arrowButton = document.querySelector("#add-arrow");
+const frameButton = document.querySelector("#add-frame");
 const layoutTablesButton = document.querySelector("#layout-tables");
+const noteFormattingElement = document.querySelector("#note-formatting");
+const noteBoldButton = document.querySelector("#note-bold");
+const noteItalicButton = document.querySelector("#note-italic");
+const noteUnderlineButton = document.querySelector("#note-underline");
+const noteParagraphStyleElement = document.querySelector("#note-paragraph-style");
+const noteAlignmentElement = document.querySelector("#note-alignment");
+const tableFormattingElement = document.querySelector("#table-formatting");
+const tableHeaderColorControl = {
+  button: document.querySelector("#table-header-color-button"),
+  preview: document.querySelector("#table-header-color-preview"),
+  menu: document.querySelector("#table-header-color-menu"),
+  swatches: document.querySelector("#table-header-color-swatches"),
+  custom: document.querySelector("#table-header-custom-color")
+};
+const arrowFormattingElement = document.querySelector("#arrow-formatting");
+const arrowStartHeadElement = document.querySelector("#arrow-start-head");
+const arrowEndHeadElement = document.querySelector("#arrow-end-head");
+const arrowLineStyleElement = document.querySelector("#arrow-line-style");
+const arrowStrokeWidthElement = document.querySelector("#arrow-stroke-width");
+const arrowColorControl = {
+  button: document.querySelector("#arrow-color-button"),
+  preview: document.querySelector("#arrow-color-preview"),
+  menu: document.querySelector("#arrow-color-menu"),
+  swatches: document.querySelector("#arrow-color-swatches"),
+  custom: document.querySelector("#arrow-custom-color")
+};
+const frameFormattingElement = document.querySelector("#frame-formatting");
+const frameLineStyleElement = document.querySelector("#frame-line-style");
+const frameColorControl = {
+  button: document.querySelector("#frame-color-button"),
+  preview: document.querySelector("#frame-color-preview"),
+  menu: document.querySelector("#frame-color-menu"),
+  swatches: document.querySelector("#frame-color-swatches"),
+  custom: document.querySelector("#frame-custom-color")
+};
+const codeFormattingElement = document.querySelector("#code-formatting");
+const codeLanguageElement = document.querySelector("#code-language");
+const codeSourceElement = document.querySelector("#code-source");
+const codeLineNumbersButton = document.querySelector("#code-line-numbers");
+const codeSizeElement = document.querySelector("#code-size");
+const codeSourceFieldsElement = document.querySelector("#code-source-fields");
+const codeSourcePathElement = document.querySelector("#code-source-path");
+const codeSourceStartElement = document.querySelector("#code-source-start");
+const codeSourceEndElement = document.querySelector("#code-source-end");
+const sourceFilePathsElement = document.querySelector("#source-file-paths");
+const sourceDialogElement = document.querySelector("#source-dialog");
+const sourceFormElement = document.querySelector("#source-form");
+const sourcePathElement = document.querySelector("#source-path");
+const sourceStartElement = document.querySelector("#source-start");
+const sourceEndElement = document.querySelector("#source-end");
+const sourceErrorElement = document.querySelector("#source-error");
+const sourceSubmitButton = document.querySelector("#source-submit");
+const noteColorControls = [
+  {
+    property: "fill",
+    defaults: CanvasERDDocument.DEFAULT_FOREGROUND_COLORS,
+    button: document.querySelector("#note-text-color-button"),
+    preview: document.querySelector("#note-text-color-preview"),
+    menu: document.querySelector("#note-text-color-menu"),
+    swatches: document.querySelector("#note-text-color-swatches"),
+    custom: document.querySelector("#note-text-custom-color")
+  },
+  {
+    property: "backgroundColor",
+    defaults: CanvasERDDocument.DEFAULT_BACKGROUND_COLORS,
+    button: document.querySelector("#note-background-color-button"),
+    preview: document.querySelector("#note-background-color-preview"),
+    menu: document.querySelector("#note-background-color-menu"),
+    swatches: document.querySelector("#note-background-color-swatches"),
+    custom: document.querySelector("#note-background-custom-color"),
+    transparent: document.querySelector("#note-background-transparent")
+  }
+];
 
 let schema;
 let applicationSchema;
@@ -33,7 +107,11 @@ let lastCanvasPointer = null;
 const tableObjects = new Map();
 let relationshipObjects = [];
 const noteObjects = new Map();
+const codeObjects = new Map();
+const codeHighlightTimers = new Map();
 const arrowObjects = new Map();
+const frameObjects = new Map();
+const frameLabelObjects = new Map();
 let noticeTimer;
 let currentDiagramFilename = null;
 let diagramsDirectory = "docs/erd";
@@ -44,6 +122,14 @@ let arrowMode = false;
 let drawingArrow = null;
 let arrowPreview = null;
 let editingArrowId = null;
+let frameMode = false;
+let drawingFrame = null;
+let framePreview = null;
+let lastNoteFormatting = CanvasERDDocument.inheritedNoteFormatting();
+let lastCodeLanguage = "ruby";
+let highlighting = { foreground: "#24292f", background: "#f6f8fa", languages: [] };
+let modelDetails = {};
+let sourceDialogPosition = null;
 const arrowEndpointHandles = new Map();
 const changeTracker = CanvasERDDocument.createChangeTracker(updateSaveButton);
 const layoutEngine = new ELK({ workerUrl: "/assets/elk-worker.min.js" });
@@ -145,7 +231,7 @@ function updateTableCaching() {
 
 function updateNoteSelectionPadding() {
   const padding = CanvasERDDocument.noteSelectionPadding(canvas.getZoom());
-  noteObjects.forEach((note) => {
+  [...noteObjects.values(), ...codeObjects.values()].forEach((note) => {
     if (note.padding === padding) return;
     note.padding = padding;
     note.setCoords();
@@ -177,6 +263,7 @@ function truncate(value, length) {
 function createTableObject(entity) {
   const width = CanvasERDDocument.CARD_WIDTH;
   const height = CanvasERDDocument.tableHeight(entity);
+  const headerColor = CanvasERDDocument.tableHeaderColor(state, entity.id);
   const objects = [
     new fabric.Rect(CanvasERDDocument.topLeft({
       left: 0,
@@ -195,7 +282,7 @@ function createTableObject(entity) {
       top: 0,
       width,
       height: CanvasERDDocument.HEADER_HEIGHT,
-      fill: "#243b63",
+      fill: headerColor,
       rx: 8,
       ry: 8
     })),
@@ -204,7 +291,7 @@ function createTableObject(entity) {
       top: CanvasERDDocument.HEADER_HEIGHT - 8,
       width,
       height: 8,
-      fill: "#243b63"
+      fill: headerColor
     })),
     new fabric.FabricText(truncate(entity.label, 34), CanvasERDDocument.uncachedText({
       left: 14,
@@ -318,26 +405,73 @@ function relationStyle(relationship) {
   };
 }
 
+function createCardinalityObjects(geometry, style) {
+  const markerStyle = { ...style, strokeDashArray: null };
+  const objects = geometry.segments.map(({ start, end }) => (
+    new fabric.Line([start.x, start.y, end.x, end.y], markerStyle)
+  ));
+  geometry.circles.forEach(({ center, radius }) => {
+    objects.push(new fabric.Circle({
+      left: center.x,
+      top: center.y,
+      originX: "center",
+      originY: "center",
+      radius,
+      fill: "#f7f8fb",
+      stroke: style.stroke,
+      strokeWidth: style.strokeWidth,
+      selectable: false,
+      evented: false,
+      objectCaching: false
+    }));
+  });
+  if (geometry.label) {
+    objects.push(new fabric.FabricText(geometry.label, {
+      left: geometry.labelPosition.x,
+      top: geometry.labelPosition.y,
+      originX: "center",
+      originY: "center",
+      fontFamily: CanvasERDDocument.CANVAS_FONT_FAMILY,
+      fontSize: 10,
+      fill: "#526277",
+      backgroundColor: "#f7f8fb",
+      selectable: false,
+      evented: false
+    }));
+  }
+  return objects;
+}
+
 function createRelationshipObjects(relationship, source, destination) {
   const sourceBounds = tableBounds(source);
   const destinationBounds = tableBounds(destination);
   const style = relationStyle(relationship);
   let connector;
-  let labelPosition;
+  let sourceEndpoint;
+  let destinationEndpoint;
 
   if (source === destination) {
     const right = sourceBounds.left + sourceBounds.width;
     const top = sourceBounds.top;
     const centerY = top + sourceBounds.height / 2;
-    const points = [
+    sourceEndpoint = CanvasERDDocument.cardinalityEndpointGeometry(
       { x: right, y: centerY },
-      { x: right + 44, y: centerY },
-      { x: right + 44, y: top - 34 },
-      { x: right - 20, y: top - 34 },
-      { x: right - 20, y: top }
+      { x: 1, y: 0 },
+      relationship.cardinality.source
+    );
+    destinationEndpoint = CanvasERDDocument.cardinalityEndpointGeometry(
+      { x: right - 20, y: top },
+      { x: 0, y: -1 },
+      relationship.cardinality.destination
+    );
+    const points = [
+      sourceEndpoint.shaftPoint,
+      { x: right + 48, y: centerY },
+      { x: right + 48, y: top - 48 },
+      { x: right - 20, y: top - 48 },
+      destinationEndpoint.shaftPoint
     ];
     connector = new fabric.Polyline(points, style);
-    labelPosition = { x: right + 48, y: top - 28 };
   } else {
     const sourceCenter = {
       x: sourceBounds.left + sourceBounds.width / 2,
@@ -347,33 +481,31 @@ function createRelationshipObjects(relationship, source, destination) {
       x: destinationBounds.left + destinationBounds.width / 2,
       y: destinationBounds.top + destinationBounds.height / 2
     };
+    sourceEndpoint = CanvasERDDocument.relationshipEndpointGeometry(
+      sourceBounds,
+      destinationCenter,
+      relationship.cardinality.source
+    );
+    destinationEndpoint = CanvasERDDocument.relationshipEndpointGeometry(
+      destinationBounds,
+      sourceCenter,
+      relationship.cardinality.destination
+    );
     connector = new fabric.Line([
-      sourceCenter.x,
-      sourceCenter.y,
-      destinationCenter.x,
-      destinationCenter.y
+      sourceEndpoint.shaftPoint.x,
+      sourceEndpoint.shaftPoint.y,
+      destinationEndpoint.shaftPoint.x,
+      destinationEndpoint.shaftPoint.y
     ], style);
-    labelPosition = {
-      x: (sourceCenter.x + destinationCenter.x) / 2,
-      y: (sourceCenter.y + destinationCenter.y) / 2
-    };
   }
 
-  connector.canvasErdType = "relationship";
-  const label = new fabric.FabricText(CanvasERDDocument.cardinalityLabel(relationship), {
-    left: labelPosition.x,
-    top: labelPosition.y,
-    originX: "center",
-    originY: "center",
-    fontFamily: CanvasERDDocument.CANVAS_FONT_FAMILY,
-    fontSize: 10,
-    fill: "#526277",
-    backgroundColor: "#f7f8fb",
-    selectable: false,
-    evented: false
-  });
-  label.canvasErdType = "relationship";
-  return [connector, label];
+  const objects = [
+    connector,
+    ...createCardinalityObjects(sourceEndpoint, style),
+    ...createCardinalityObjects(destinationEndpoint, style)
+  ];
+  objects.forEach((object) => { object.canvasErdType = "relationship"; });
+  return objects;
 }
 
 function renderRelationships() {
@@ -390,7 +522,7 @@ function renderRelationships() {
     canvas.add(...objects);
   });
 
-  [...relationshipObjects].reverse().forEach((object) => canvas.sendObjectToBack(object));
+  restackCanvasObjects();
   canvas.requestRenderAll();
   updateStatus();
 }
@@ -448,38 +580,666 @@ async function layoutTables() {
 }
 
 function createNoteObject(note) {
+  const borderColor = CanvasERDDocument.noteBorderColor(
+    CanvasERDDocument.noteFormatting(note).backgroundColor
+  );
   const object = new fabric.Textbox(note.text, CanvasERDDocument.uncachedText({
     ...CanvasERDDocument.noteCanvasGeometry(note),
-    fill: "#4a3f12",
-    backgroundColor: "#fff2a8",
-    fontFamily: CanvasERDDocument.CANVAS_FONT_FAMILY,
-    fontSize: 15,
-    lineHeight: 1.25,
     padding: CanvasERDDocument.noteSelectionPadding(canvas.getZoom()),
-    borderColor: "#d09b16",
-    editingBorderColor: "#d09b16",
-    cornerColor: "#d09b16",
+    borderColor,
+    editingBorderColor: borderColor,
+    cornerColor: borderColor,
     transparentCorners: false,
     lockScalingY: true
   }));
-  object._renderBackground = function (context) {
-    if (!this.backgroundColor) return;
-
-    const dimensions = this._getNonTransformedDimensions();
-    const bounds = CanvasERDDocument.paddedBackgroundBounds(
-      dimensions.x,
-      dimensions.y,
-      CanvasERDDocument.NOTE_PADDING
-    );
-    context.fillStyle = this.backgroundColor;
-    context.fillRect(bounds.left, bounds.top, bounds.width, bounds.height);
-    this._removeShadow(context);
-  };
+  object._renderBackground = renderPaddedBackground;
   object.canvasErdType = "note";
   object.noteId = note.id;
   return object;
 }
 
+function renderPaddedBackground(context) {
+  if (!this.backgroundColor) return;
+
+  const dimensions = this._getNonTransformedDimensions();
+  const bounds = CanvasERDDocument.paddedBackgroundBounds(
+    dimensions.x,
+    dimensions.y,
+    CanvasERDDocument.NOTE_PADDING
+  );
+  context.fillStyle = this.backgroundColor;
+  context.fillRect(bounds.left, bounds.top, bounds.width, bounds.height);
+  this._removeShadow(context);
+}
+
+function activeNoteObject() {
+  const active = canvas?.getActiveObject();
+  return active?.canvasErdType === "note" ? active : null;
+}
+
+class CodeTextbox extends fabric.Textbox {
+  _getLeftOffset() {
+    return super._getLeftOffset() + (this.gutterWidth || 0);
+  }
+
+  _wrapText(lines, desiredWidth) {
+    const wrapped = super._wrapText(lines, desiredWidth - (this.gutterWidth || 0));
+    this.dynamicMinWidth += this.gutterWidth || 0;
+    return wrapped;
+  }
+
+  gutterLabelAt(event) {
+    const block = findCodeBlock(this.codeBlockId);
+    if (!this.gutterWidth || !block || !this.canvas) return undefined;
+
+    const point = this.canvas.getScenePoint(event).transform(fabric.util.invertTransform(this.calcTransformMatrix()));
+    const x = point.x + this.width / 2;
+    if (x < -CanvasERDDocument.NOTE_PADDING || x > this.gutterWidth - this.fontSize * 0.3) return undefined;
+
+    const row = CanvasERDDocument.codeRowAt(
+      this._textLines.map((_, index) => this.getHeightOfLine(index)),
+      point.y - this._getTopOffset()
+    );
+    if (row < 0) return null;
+    const labels = CanvasERDDocument.codeLineLabels(block, this.text.split("\n").length);
+    return labels[this._styleMap[row].line] ?? null;
+  }
+
+  mouseUpHandler(options) {
+    if (this.gutterLabelAt(options.e) !== undefined) return;
+    super.mouseUpHandler(options);
+  }
+}
+
+function toggleCodeLineHighlight(object, label, extend) {
+  const block = findCodeBlock(object.codeBlockId);
+  if (!block) return;
+
+  const labels = CanvasERDDocument.codeLineLabels(block, object.text.split("\n").length);
+  block.highlightedLines = extend && object.highlightAnchor !== undefined
+    ? CanvasERDDocument.highlightLineRange(block.highlightedLines, labels, object.highlightAnchor, label)
+    : CanvasERDDocument.toggleHighlightedLine(block.highlightedLines, label);
+  object.highlightAnchor = label;
+  canvas.requestRenderAll();
+  markDirty();
+}
+
+function codeGutterWidth(block, text) {
+  if (!block.showLineNumbers) return 0;
+  const labels = CanvasERDDocument.codeLineLabels(block, text.split("\n").length);
+  return CanvasERDDocument.codeGutterWidth(labels, CanvasERDDocument.codeFontSize(block));
+}
+
+function renderCodeBackground(context) {
+  renderPaddedBackground.call(this, context);
+  const block = findCodeBlock(this.codeBlockId);
+  if (!block) return;
+
+  const labels = CanvasERDDocument.codeLineLabels(block, this.text.split("\n").length);
+  const highlighted = new Set(block.highlightedLines || []);
+  const dimensions = this._getNonTransformedDimensions();
+  const padding = CanvasERDDocument.NOTE_PADDING;
+  context.save();
+  if (highlighted.size > 0) {
+    let rowTop = this._getTopOffset();
+    context.fillStyle = "#fff8c5";
+    this._textLines.forEach((_, index) => {
+      const height = this.getHeightOfLine(index);
+      if (highlighted.has(labels[this._styleMap[index].line])) {
+        context.fillRect(-dimensions.x / 2 - padding, rowTop, dimensions.x + padding * 2, height);
+      }
+      rowTop += height;
+    });
+  }
+  if (!this.gutterWidth) {
+    context.restore();
+    return;
+  }
+
+  const right = -this.width / 2 + this.gutterWidth - this.fontSize * 0.6;
+  const separator = -this.width / 2 + this.gutterWidth - this.fontSize * 0.3;
+  let top = this._getTopOffset();
+  context.strokeStyle = "#d0d7de";
+  context.lineWidth = 1;
+  context.beginPath();
+  context.moveTo(separator, -dimensions.y / 2 - CanvasERDDocument.NOTE_PADDING);
+  context.lineTo(separator, dimensions.y / 2 + CanvasERDDocument.NOTE_PADDING);
+  context.stroke();
+  context.font = `${this.fontSize}px ${this.fontFamily}`;
+  context.fillStyle = "#8c959f";
+  context.textAlign = "right";
+  this._textLines.forEach((_, index) => {
+    const line = this._styleMap[index];
+    const label = line.offset === 0 ? labels[line.line] : null;
+    if (label !== null && label !== undefined) {
+      const baseline = top + this.getHeightOfLineImpl(index) - this.fontSize * this._fontSizeFraction;
+      context.fillText(String(label), right, baseline);
+    }
+    top += this.getHeightOfLine(index);
+  });
+  context.restore();
+}
+
+function updateCodeGutter(object) {
+  const block = findCodeBlock(object.codeBlockId);
+  const width = block ? codeGutterWidth(block, object.text) : 0;
+  if ((object.gutterWidth || 0) === width) return;
+  object.gutterWidth = width;
+  object.initDimensions();
+  object.setCoords();
+}
+
+function toggleCodeLineNumbers() {
+  const object = activeCodeObject();
+  const block = object && findCodeBlock(object.codeBlockId);
+  if (!block) return;
+
+  block.showLineNumbers = !block.showLineNumbers;
+  const previousWidth = object.gutterWidth || 0;
+  object.gutterWidth = codeGutterWidth(block, object.text);
+  object.set({ width: object.width + object.gutterWidth - previousWidth });
+  object.initDimensions();
+  object.setCoords();
+  updateObjectState(object);
+  renderArrows();
+  updateCodeFormattingControls();
+}
+
+function applyCodeSize(size) {
+  const object = activeCodeObject();
+  const block = object && findCodeBlock(object.codeBlockId);
+  if (!block) return;
+
+  const previousFontSize = CanvasERDDocument.codeFontSize(block);
+  block.size = size;
+  const fontSize = CanvasERDDocument.codeFontSize(block);
+  object.set({ fontSize, width: object.width * fontSize / previousFontSize });
+  object.gutterWidth = codeGutterWidth(block, object.text);
+  object.initDimensions();
+  object.setCoords();
+  updateObjectState(object);
+  renderArrows();
+}
+
+function createCodeObject(block) {
+  const borderColor = CanvasERDDocument.noteBorderColor(highlighting.background);
+  const object = new CodeTextbox(block.code, CanvasERDDocument.uncachedText({
+    ...CanvasERDDocument.codeCanvasGeometry(block),
+    gutterWidth: codeGutterWidth(block, block.code),
+    fill: highlighting.foreground,
+    backgroundColor: highlighting.background,
+    editable: !block.source,
+    padding: CanvasERDDocument.noteSelectionPadding(canvas.getZoom()),
+    borderColor,
+    editingBorderColor: borderColor,
+    cornerColor: borderColor,
+    transparentCorners: false,
+    lockScalingY: true
+  }));
+  object._renderBackground = renderCodeBackground;
+  object.canvasErdType = "code";
+  object.codeBlockId = block.id;
+  highlightCodeObject(object);
+  return object;
+}
+
+function findCodeBlock(id) {
+  return state.codeBlocks.find((candidate) => candidate.id === id);
+}
+
+function activeCodeObject() {
+  const active = canvas?.getActiveObject();
+  return active?.canvasErdType === "code" ? active : null;
+}
+
+function scheduleCodeHighlight(object, delay = 300) {
+  clearTimeout(codeHighlightTimers.get(object.codeBlockId));
+  codeHighlightTimers.set(object.codeBlockId, setTimeout(() => highlightCodeObject(object), delay));
+}
+
+async function highlightCodeObject(object) {
+  codeHighlightTimers.delete(object.codeBlockId);
+  const block = findCodeBlock(object.codeBlockId);
+  if (!block) return;
+
+  const code = object.text;
+  try {
+    const response = await fetch("/api/highlight", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ code, language: block.language })
+    });
+    if (!response.ok) throw new Error(await response.text());
+
+    const result = await response.json();
+    if (codeObjects.get(block.id) !== object || object.text !== code) return;
+    if (result.code !== code) {
+      if (object.isEditing) return;
+      object.set({ text: result.code });
+      block.code = result.code;
+      markDirty();
+    }
+    object.styles = CanvasERDDocument.codeTokenStyles(result.runs);
+    object.initDimensions();
+    object.setCoords();
+    canvas.requestRenderAll();
+  } catch (error) {
+    showNotice(`Could not highlight code: ${error.message}`, true);
+  }
+}
+
+function updateCodeFormattingControls() {
+  const object = activeCodeObject();
+  const block = object && findCodeBlock(object.codeBlockId);
+  codeFormattingElement.hidden = !block;
+  if (!block) return;
+
+  lastCodeLanguage = block.language;
+  codeLanguageElement.value = block.language;
+  codeLineNumbersButton.setAttribute("aria-pressed", String(Boolean(block.showLineNumbers)));
+  codeSizeElement.value = block.size || "medium";
+  const fileSource = block.source?.path ? block.source : null;
+  codeSourceElement.hidden = !block.source?.model;
+  codeSourceElement.textContent = block.source?.model ? CanvasERDDocument.sourceReferenceLabel(block.source) : "";
+  codeSourceFieldsElement.hidden = !fileSource;
+  codeSourcePathElement.value = fileSource?.path || "";
+  codeSourceStartElement.value = fileSource?.startLine || "";
+  codeSourceEndElement.value = fileSource?.endLine || "";
+}
+
+async function applyCodeSource() {
+  const object = activeCodeObject();
+  const block = object && findCodeBlock(object.codeBlockId);
+  if (!block?.source?.path) return;
+
+  const source = CanvasERDDocument.sourceFromFields(
+    codeSourcePathElement.value,
+    codeSourceStartElement.value,
+    codeSourceEndElement.value
+  );
+  try {
+    if (!source) throw new Error("Enter a source file path.");
+    const result = await fetchSource(source);
+    if (source.path !== block.source.path) block.language = result.language;
+    block.source = source;
+    replaceCodeText(object, block, result.code);
+    markDirty();
+  } catch (error) {
+    showNotice(`Could not change source file: ${error.message}`, true);
+  }
+  if (activeCodeObject() === object) updateCodeFormattingControls();
+}
+
+function replaceCodeText(object, block, code) {
+  block.code = code;
+  object.set({ text: code });
+  object.styles = {};
+  updateCodeGutter(object);
+  object.setCoords();
+  renderArrows();
+  highlightCodeObject(object);
+}
+
+async function loadSourceFilePaths() {
+  try {
+    const response = await fetch("/api/source_files", { cache: "no-store" });
+    if (!response.ok) throw new Error(await response.text());
+
+    const result = await response.json();
+    sourceFilePathsElement.replaceChildren(...result.paths.map((path) => {
+      const option = document.createElement("option");
+      option.value = path;
+      return option;
+    }));
+  } catch (error) {
+    showNotice(`Could not list source files: ${error.message}`, true);
+  }
+}
+
+function renderCodeLanguages() {
+  codeLanguageElement.replaceChildren(...highlighting.languages.map((language) => {
+    const option = document.createElement("option");
+    option.value = language.tag;
+    option.textContent = language.title;
+    return option;
+  }));
+}
+
+function applyCodeLanguage(language) {
+  const object = activeCodeObject();
+  const block = object && findCodeBlock(object.codeBlockId);
+  if (!block) return;
+
+  block.language = language;
+  lastCodeLanguage = language;
+  highlightCodeObject(object);
+  markDirty();
+}
+
+function renderCodeBlocks() {
+  state.codeBlocks.forEach((block) => {
+    const object = createCodeObject(block);
+    codeObjects.set(block.id, object);
+    canvas.add(object);
+  });
+}
+
+function sourceUrl(source) {
+  if (source.model) {
+    return `/api/model_detail?${new URLSearchParams({ model: source.model, detail: source.detail })}`;
+  }
+
+  const query = new URLSearchParams({ path: source.path });
+  if (source.startLine) query.set("start", source.startLine);
+  if (source.endLine) query.set("end", source.endLine);
+  return `/api/source?${query}`;
+}
+
+async function fetchSource(source) {
+  const response = await fetch(sourceUrl(source), { cache: "no-store" });
+  if (!response.ok) throw new Error(await response.text());
+  return response.json();
+}
+
+async function refreshSourceCodeBlocks() {
+  const failures = [];
+  await Promise.all(state.codeBlocks.filter((block) => block.source).map(async (block) => {
+    try {
+      const result = await fetchSource(block.source);
+      const object = codeObjects.get(block.id);
+      if (result.lineNumbers) block.lineNumbers = result.lineNumbers;
+      canvas.requestRenderAll();
+      if (result.code === block.code || !object) return;
+      replaceCodeText(object, block, result.code);
+    } catch (error) {
+      failures.push(`${CanvasERDDocument.sourceReferenceLabel(block.source)}: ${error.message}`);
+    }
+  }));
+  if (failures.length > 0) showNotice(`Could not refresh source files: ${failures.join("; ")}`, true);
+}
+
+function activeTableEntityIds() {
+  return CanvasERDDocument.selectedEntityIds(canvas?.getActiveObject());
+}
+
+function updateNoteFormattingControls() {
+  const note = activeNoteObject();
+  noteFormattingElement.hidden = !note;
+  if (!note) return;
+
+  const formatting = CanvasERDDocument.noteFormatting(note);
+  lastNoteFormatting = CanvasERDDocument.inheritedNoteFormatting(formatting);
+  noteBoldButton.setAttribute("aria-pressed", String(formatting.fontWeight === "bold"));
+  noteItalicButton.setAttribute("aria-pressed", String(formatting.fontStyle === "italic"));
+  noteUnderlineButton.setAttribute("aria-pressed", String(formatting.underline));
+  noteColorControls.forEach((control) => {
+    const color = formatting[control.property];
+    control.preview.style.backgroundColor = color;
+    control.preview.classList.toggle("transparent-color", color === "transparent");
+    if (control.transparent) {
+      control.transparent.setAttribute("aria-pressed", String(color === "transparent"));
+    }
+    if (/^#[0-9a-f]{6}$/i.test(color)) control.custom.value = color;
+  });
+  noteParagraphStyleElement.value = formatting.paragraphStyle;
+  noteAlignmentElement.value = formatting.textAlign;
+}
+
+function closeNoteFormattingMenus() {
+  let closed = false;
+  noteColorControls.forEach((control) => {
+    if (!control.menu.hidden) closed = true;
+    control.menu.hidden = true;
+    control.button.setAttribute("aria-expanded", "false");
+  });
+  if (!tableHeaderColorControl.menu.hidden) closed = true;
+  tableHeaderColorControl.menu.hidden = true;
+  tableHeaderColorControl.button.setAttribute("aria-expanded", "false");
+  if (!arrowColorControl.menu.hidden) closed = true;
+  arrowColorControl.menu.hidden = true;
+  arrowColorControl.button.setAttribute("aria-expanded", "false");
+  if (!frameColorControl.menu.hidden) closed = true;
+  frameColorControl.menu.hidden = true;
+  frameColorControl.button.setAttribute("aria-expanded", "false");
+  return closed;
+}
+
+function renderColorSwatches(element, colors, defaults, currentColor, applyColor) {
+  const fragment = document.createDocumentFragment();
+  const sections = CanvasERDDocument.colorPaletteSections(colors, defaults);
+  const appendSwatches = (swatches) => swatches.forEach((color) => {
+    const swatch = document.createElement("button");
+    swatch.className = "color-swatch";
+    swatch.type = "button";
+    swatch.title = color;
+    swatch.setAttribute("aria-label", `Use ${color}`);
+    swatch.setAttribute("aria-pressed", String(color === currentColor));
+    swatch.style.backgroundColor = color;
+    swatch.classList.toggle("transparent-color", color === "transparent");
+    swatch.addEventListener("click", () => {
+      applyColor(color);
+      closeNoteFormattingMenus();
+    });
+    fragment.append(swatch);
+  });
+  appendSwatches(sections.defaults);
+  if (sections.custom.length > 0) {
+    const separator = document.createElement("div");
+    separator.className = "swatch-separator";
+    separator.setAttribute("role", "separator");
+    fragment.append(separator);
+    appendSwatches(sections.custom);
+  }
+  element.replaceChildren(fragment);
+}
+
+function renderNoteColorSwatches(control) {
+  const note = activeNoteObject();
+  if (!note) return;
+
+  const currentColor = CanvasERDDocument.noteFormatting(note)[control.property].toLowerCase();
+  renderColorSwatches(
+    control.swatches,
+    CanvasERDDocument.noteColorSwatches(state.notes, control.property, control.defaults),
+    control.defaults,
+    currentColor,
+    (color) => applyNoteFormatting({ [control.property]: color })
+  );
+}
+
+function toggleNoteColorMenu(control) {
+  const opening = control.menu.hidden;
+  closeNoteFormattingMenus();
+  if (!opening || !activeNoteObject()) return;
+
+  renderNoteColorSwatches(control);
+  control.menu.hidden = false;
+  control.button.setAttribute("aria-expanded", "true");
+}
+
+function updateTableFormattingControls() {
+  const entityIds = activeTableEntityIds();
+  tableFormattingElement.hidden = entityIds.length === 0;
+  if (entityIds.length === 0) return;
+
+  const color = CanvasERDDocument.selectedTableHeaderColor(state, entityIds);
+  tableHeaderColorControl.preview.style.backgroundColor = color || "#ffffff";
+  tableHeaderColorControl.preview.classList.toggle("mixed-color", color === null);
+  if (color) tableHeaderColorControl.custom.value = color;
+}
+
+function applyTableHeaderColor(color) {
+  const entityIds = activeTableEntityIds();
+  if (entityIds.length === 0) return;
+
+  state = CanvasERDDocument.setTableHeaderColor(state, entityIds, color);
+  entityIds.forEach((entityId) => {
+    const table = tableObjects.get(entityId);
+    if (!table) return;
+    table.getObjects().slice(1, 3).forEach((header) => header.set({ fill: color }));
+    table.dirty = true;
+  });
+  updateTableFormattingControls();
+  canvas.requestRenderAll();
+  markDirty();
+}
+
+function renderTableHeaderColorSwatches() {
+  const entityIds = activeTableEntityIds();
+  if (entityIds.length === 0) return;
+
+  renderColorSwatches(
+    tableHeaderColorControl.swatches,
+    CanvasERDDocument.tableHeaderColorSwatches(state.tableHeaderColors),
+    CanvasERDDocument.DEFAULT_TABLE_HEADER_COLORS,
+    CanvasERDDocument.selectedTableHeaderColor(state, entityIds),
+    applyTableHeaderColor
+  );
+}
+
+function toggleTableHeaderColorMenu() {
+  const opening = tableHeaderColorControl.menu.hidden;
+  closeNoteFormattingMenus();
+  if (!opening || activeTableEntityIds().length === 0) return;
+
+  renderTableHeaderColorSwatches();
+  tableHeaderColorControl.menu.hidden = false;
+  tableHeaderColorControl.button.setAttribute("aria-expanded", "true");
+}
+
+function editingArrow() {
+  return state.arrows.find((arrow) => arrow.id === editingArrowId) || null;
+}
+
+function updateArrowFormattingControls() {
+  const arrow = editingArrow();
+  arrowFormattingElement.hidden = !arrow;
+  if (!arrow) return;
+
+  const formatting = CanvasERDDocument.arrowFormatting(arrow);
+  arrowColorControl.preview.style.backgroundColor = formatting.color;
+  if (/^#[0-9a-f]{6}$/i.test(formatting.color)) arrowColorControl.custom.value = formatting.color;
+  arrowStartHeadElement.value = formatting.startHead;
+  arrowEndHeadElement.value = formatting.endHead;
+  arrowLineStyleElement.value = formatting.lineStyle;
+  arrowStrokeWidthElement.value = formatting.strokeWidth;
+}
+
+function applyArrowFormatting(changes) {
+  const arrow = editingArrow();
+  if (!arrow) return;
+
+  Object.assign(arrow, CanvasERDDocument.arrowFormatting({ ...arrow, ...changes }));
+  renderArrows();
+  updateArrowFormattingControls();
+  markDirty();
+}
+
+function renderArrowColorSwatches() {
+  const arrow = editingArrow();
+  if (!arrow) return;
+
+  renderColorSwatches(
+    arrowColorControl.swatches,
+    CanvasERDDocument.arrowColorSwatches(state.arrows),
+    CanvasERDDocument.DEFAULT_FOREGROUND_COLORS,
+    CanvasERDDocument.arrowFormatting(arrow).color.toLowerCase(),
+    (color) => applyArrowFormatting({ color })
+  );
+}
+
+function toggleArrowColorMenu() {
+  const opening = arrowColorControl.menu.hidden;
+  closeNoteFormattingMenus();
+  if (!opening || !editingArrow()) return;
+
+  renderArrowColorSwatches();
+  arrowColorControl.menu.hidden = false;
+  arrowColorControl.button.setAttribute("aria-expanded", "true");
+}
+
+function activeFrame() {
+  const active = canvas?.getActiveObject();
+  const frameId = ["frame", "frame-label"].includes(active?.canvasErdType) ? active.frameId : null;
+  return state.frames.find((frame) => frame.id === frameId) || null;
+}
+
+function updateFrameFormattingControls() {
+  const frame = activeFrame();
+  frameFormattingElement.hidden = !frame;
+  if (!frame) return;
+
+  const formatting = CanvasERDDocument.frameFormatting(frame);
+  frameColorControl.preview.style.backgroundColor = formatting.color;
+  if (/^#[0-9a-f]{6}$/i.test(formatting.color)) frameColorControl.custom.value = formatting.color;
+  frameLineStyleElement.value = formatting.lineStyle;
+}
+
+function applyFrameFormatting(changes) {
+  const frame = activeFrame();
+  if (!frame) return;
+
+  Object.assign(frame, CanvasERDDocument.frameFormatting({ ...frame, ...changes }));
+  frameObjects.get(frame.id)?.set({
+    stroke: frame.color,
+    strokeDashArray: CanvasERDDocument.arrowStrokeDashArray(frame.lineStyle),
+    strokeLineCap: frame.lineStyle === "dotted" ? "round" : "butt"
+  });
+  frameLabelObjects.get(frame.id)?.set({ fill: frame.color });
+  updateFrameFormattingControls();
+  canvas.requestRenderAll();
+  markDirty();
+}
+
+function renderFrameColorSwatches() {
+  const frame = activeFrame();
+  if (!frame) return;
+
+  renderColorSwatches(
+    frameColorControl.swatches,
+    CanvasERDDocument.frameColorSwatches(state.frames),
+    CanvasERDDocument.DEFAULT_FOREGROUND_COLORS,
+    CanvasERDDocument.frameFormatting(frame).color.toLowerCase(),
+    (color) => applyFrameFormatting({ color })
+  );
+}
+
+function toggleFrameColorMenu() {
+  const opening = frameColorControl.menu.hidden;
+  closeNoteFormattingMenus();
+  if (!opening || !activeFrame()) return;
+
+  renderFrameColorSwatches();
+  frameColorControl.menu.hidden = false;
+  frameColorControl.button.setAttribute("aria-expanded", "true");
+}
+
+function applyNoteFormatting(formatting) {
+  const note = activeNoteObject();
+  if (!note) return;
+
+  note.set(formatting);
+  const borderColor = CanvasERDDocument.noteBorderColor(note.backgroundColor);
+  note.set({ borderColor, editingBorderColor: borderColor, cornerColor: borderColor });
+  note.setCoords();
+  updateObjectState(note);
+  updateNoteFormattingControls();
+  canvas.requestRenderAll();
+}
+
+function toggleNoteFormatting(formatting) {
+  const note = activeNoteObject();
+  if (!note) return;
+
+  if (formatting === "bold") {
+    applyNoteFormatting({ fontWeight: note.fontWeight === "bold" ? "normal" : "bold" });
+  } else if (formatting === "italic") {
+    applyNoteFormatting({ fontStyle: note.fontStyle === "italic" ? "normal" : "italic" });
+  } else if (formatting === "underline") {
+    applyNoteFormatting({ underline: !note.underline });
+  }
+}
+
 function renderNotes() {
   state.notes.forEach((note) => {
     const object = createNoteObject(note);
@@ -488,10 +1248,156 @@ function renderNotes() {
   });
 }
 
+function createFrameObject(frame) {
+  const formatting = CanvasERDDocument.frameFormatting(frame);
+  const object = new fabric.Rect(CanvasERDDocument.topLeft({
+    left: frame.x,
+    top: frame.y,
+    width: frame.width,
+    height: frame.height,
+    fill: "transparent",
+    stroke: formatting.color,
+    strokeWidth: 2,
+    strokeDashArray: CanvasERDDocument.arrowStrokeDashArray(formatting.lineStyle),
+    strokeLineCap: formatting.lineStyle === "dotted" ? "round" : "butt",
+    strokeUniform: true,
+    objectCaching: false,
+    perPixelTargetFind: true,
+    padding: 4,
+    borderColor: "#2563eb",
+    cornerColor: "#2563eb",
+    transparentCorners: false,
+    lockRotation: true,
+    lockSkewingX: true,
+    lockSkewingY: true
+  }));
+  object.setControlsVisibility({ mtr: false });
+  object.canvasErdType = "frame";
+  object.frameId = frame.id;
+  return object;
+}
+
+function createFrameLabelObject(frame) {
+  const label = typeof frame.label === "string" ? frame.label : "Frame";
+  const object = new fabric.IText(label, CanvasERDDocument.uncachedText({
+    ...CanvasERDDocument.frameLabelCanvasStyle(frame),
+    fontFamily: CanvasERDDocument.CANVAS_FONT_FAMILY,
+    fontSize: 15,
+    fontWeight: "bold",
+    padding: 3,
+    hasControls: false,
+    lockMovementX: true,
+    lockMovementY: true,
+    borderColor: "#2563eb",
+    editingBorderColor: "#2563eb"
+  }));
+  object.canvasErdType = "frame-label";
+  object.frameId = frame.id;
+  return object;
+}
+
+function renderFrames() {
+  frameObjects.forEach((object) => canvas.remove(object));
+  frameLabelObjects.forEach((object) => canvas.remove(object));
+  frameObjects.clear();
+  frameLabelObjects.clear();
+  state.frames.forEach((frame) => {
+    const object = createFrameObject(frame);
+    const label = createFrameLabelObject(frame);
+    frameObjects.set(frame.id, object);
+    frameLabelObjects.set(frame.id, label);
+    canvas.add(object, label);
+  });
+  restackCanvasObjects();
+  canvas.requestRenderAll();
+}
+
+function renderFramePreview() {
+  if (framePreview) canvas.remove(framePreview);
+  const bounds = CanvasERDDocument.frameBounds(drawingFrame.start, drawingFrame.end);
+  framePreview = new fabric.Rect(CanvasERDDocument.topLeft({
+    left: bounds.x,
+    top: bounds.y,
+    width: bounds.width,
+    height: bounds.height,
+    fill: "rgba(37, 99, 235, 0.03)",
+    stroke: "#2563eb",
+    strokeWidth: 2,
+    strokeDashArray: [7, 5],
+    selectable: false,
+    evented: false,
+    objectCaching: false
+  }));
+  framePreview.canvasErdType = "frame-preview";
+  canvas.add(framePreview);
+  restackCanvasObjects();
+  canvas.requestRenderAll();
+}
+
+function setFrameMode(active) {
+  if (active && arrowMode) cancelArrowDrawing();
+  if (active && editingArrowId) finishArrowEndpointEditing();
+  frameMode = active;
+  frameButton.setAttribute("aria-pressed", String(active));
+  canvas.selection = !active;
+  canvas.setCursor(active ? "crosshair" : "default");
+  [
+    ...frameObjects.values(),
+    ...frameLabelObjects.values(),
+    ...tableObjects.values(),
+    ...noteObjects.values(),
+    ...codeObjects.values(),
+    ...arrowObjects.values()
+  ].forEach((object) => {
+    object.selectable = !active;
+    object.evented = !active;
+  });
+  if (active) canvas.discardActiveObject();
+  canvas.requestRenderAll();
+}
+
+function cancelFrameDrawing() {
+  if (framePreview) canvas.remove(framePreview);
+  framePreview = null;
+  drawingFrame = null;
+  setFrameMode(false);
+}
+
+function finishFrameDrawing(point) {
+  if (!drawingFrame) return;
+  drawingFrame.end = point;
+  const bounds = CanvasERDDocument.frameBounds(drawingFrame.start, drawingFrame.end);
+  if (framePreview) canvas.remove(framePreview);
+  framePreview = null;
+
+  if (bounds.width >= 40 && bounds.height >= 30) {
+    const frame = {
+      id: globalThis.crypto && crypto.randomUUID ? crypto.randomUUID() : `frame-${Date.now()}`,
+      label: "Frame",
+      ...bounds,
+      ...CanvasERDDocument.DEFAULT_FRAME_FORMATTING
+    };
+    state.frames.push(frame);
+    drawingFrame = null;
+    renderFrames();
+    setFrameMode(false);
+    const label = frameLabelObjects.get(frame.id);
+    canvas.setActiveObject(label);
+    label.enterEditing();
+    label.selectAll();
+    canvas.requestRenderAll();
+    markDirty();
+  } else {
+    drawingFrame = null;
+    setFrameMode(false);
+  }
+}
+
 function attachmentTarget(attachment) {
   if (!attachment) return null;
   if (attachment.type === "entity") return tableObjects.get(attachment.id);
   if (attachment.type === "note") return noteObjects.get(attachment.id);
+  if (attachment.type === "code") return codeObjects.get(attachment.id);
   return null;
 }
 
@@ -506,7 +1412,7 @@ function resolveArrowEndpoint(endpoint) {
 }
 
 function attachableTargetAt(point) {
-  const objects = [...noteObjects.values(), ...tableObjects.values()].reverse();
+  const objects = [...noteObjects.values(), ...codeObjects.values(), ...tableObjects.values()].reverse();
   return objects.find((object) => {
     const bounds = object.getBoundingRect();
     return point.x >= bounds.left && point.x <= bounds.left + bounds.width &&
@@ -530,13 +1436,58 @@ function arrowEndpoint(eventData) {
   return endpointAt(point, eventData.target, eventData.e.ctrlKey);
 }
 
+function drawArrowHead(context, point, angle, style, color, strokeWidth) {
+  if (style === "none") return;
+
+  const { length, halfWidth, radius } = CanvasERDDocument.arrowHeadGeometry(style, strokeWidth);
+  context.save();
+  context.translate(point.x, point.y);
+  context.rotate(angle);
+  context.fillStyle = color;
+  context.strokeStyle = color;
+  context.lineWidth = strokeWidth;
+  context.lineCap = "round";
+  context.lineJoin = "round";
+  context.setLineDash([]);
+  context.beginPath();
+  if (style === "open") {
+    context.moveTo(-length, -halfWidth);
+    context.lineTo(0, 0);
+    context.lineTo(-length, halfWidth);
+    context.stroke();
+  } else if (["circle", "circle-open"].includes(style)) {
+    context.arc(-radius, 0, radius, 0, Math.PI * 2);
+    if (style === "circle-open") context.stroke();
+    else context.fill();
+  } else if (["diamond", "diamond-open"].includes(style)) {
+    context.moveTo(0, 0);
+    context.lineTo(-length / 2, -halfWidth);
+    context.lineTo(-length, 0);
+    context.lineTo(-length / 2, halfWidth);
+    context.closePath();
+    if (style === "diamond-open") context.stroke();
+    else context.fill();
+  } else {
+    context.moveTo(0, 0);
+    context.lineTo(-length, -halfWidth);
+    context.lineTo(-length, halfWidth);
+    context.closePath();
+    context.fill();
+  }
+  context.restore();
+}
+
 function createArrowObject(arrow, options = {}) {
   const start = resolveArrowEndpoint(arrow.start);
   const end = resolveArrowEndpoint(arrow.end);
+  const formatting = CanvasERDDocument.arrowFormatting(arrow);
+  const color = options.stroke || formatting.color;
   const object = new fabric.Line([start.x, start.y, end.x, end.y], {
-    stroke: options.stroke || "#334e75",
-    strokeWidth: 2.25,
-    fill: options.stroke || "#334e75",
+    stroke: color,
+    strokeWidth: formatting.strokeWidth,
+    strokeDashArray: CanvasERDDocument.arrowStrokeDashArray(formatting.lineStyle),
+    strokeLineCap: formatting.lineStyle === "dotted" ? "round" : "butt",
+    fill: color,
     objectCaching: false,
     perPixelTargetFind: true,
     padding: 6,
@@ -549,20 +1500,40 @@ function createArrowObject(arrow, options = {}) {
     lockSkewingY: true
   });
   object._render = function (context) {
-    fabric.Line.prototype._render.call(this, context);
     const points = this.calcLinePoints();
-    const angle = Math.atan2(points.y2 - points.y1, points.x2 - points.x1);
+    const shaft = CanvasERDDocument.shortenedArrowLinePoints(
+      points,
+      formatting.startHead,
+      formatting.endHead,
+      this.strokeWidth
+    );
     context.save();
-    context.translate(points.x2, points.y2);
-    context.rotate(angle);
-    context.fillStyle = this.stroke;
     context.beginPath();
-    context.moveTo(1, 0);
-    context.lineTo(-10, -5.5);
-    context.lineTo(-10, 5.5);
-    context.closePath();
-    context.fill();
+    context.moveTo(shaft.x1, shaft.y1);
+    context.lineTo(shaft.x2, shaft.y2);
+    context.strokeStyle = this.stroke;
+    context.lineWidth = this.strokeWidth;
+    context.lineCap = this.strokeLineCap;
+    context.setLineDash(this.strokeDashArray || []);
+    context.stroke();
     context.restore();
+    const angle = Math.atan2(points.y2 - points.y1, points.x2 - points.x1);
+    drawArrowHead(
+      context,
+      { x: points.x1, y: points.y1 },
+      angle + Math.PI,
+      formatting.startHead,
+      this.stroke,
+      this.strokeWidth
+    );
+    drawArrowHead(
+      context,
+      { x: points.x2, y: points.y2 },
+      angle,
+      formatting.endHead,
+      this.stroke,
+      this.strokeWidth
+    );
   };
   object.canvasErdType = options.preview ? "arrow-preview" : "arrow";
   object.arrowId = arrow.id;
@@ -606,15 +1577,21 @@ function renderArrowPreview() {
 }
 
 function setArrowMode(active) {
+  if (active && frameMode) cancelFrameDrawing();
   if (active && editingArrowId) finishArrowEndpointEditing();
   arrowMode = active;
   arrowButton.setAttribute("aria-pressed", String(active));
   canvas.selection = !active;
   canvas.setCursor(active ? "crosshair" : "default");
-  [...tableObjects.values(), ...noteObjects.values(), ...arrowObjects.values()].forEach((object) => {
+  [
+    ...frameObjects.values(),
+    ...frameLabelObjects.values(),
+    ...tableObjects.values(),
+    ...noteObjects.values(),
+    ...codeObjects.values(),
+    ...arrowObjects.values()
+  ].forEach((object) => {
     object.selectable = !active;
-  });
-  arrowObjects.forEach((object) => {
     object.evented = !active;
   });
   if (active) canvas.discardActiveObject();
@@ -700,6 +1677,7 @@ function beginArrowEndpointEditing(arrowId) {
     arrowEndpointHandles.set(endpointName, handle);
     canvas.add(handle);
   });
+  updateArrowFormattingControls();
   canvas.requestRenderAll();
 }
 
@@ -713,6 +1691,8 @@ function finishArrowEndpointEditing() {
     object.evented = true;
   }
   editingArrowId = null;
+  updateArrowFormattingControls();
+  closeNoteFormattingMenus();
   canvas.discardActiveObject();
   canvas.requestRenderAll();
 }
@@ -757,6 +1737,7 @@ function removeActiveArrows() {
 }
 
 function addNote(position = canvas.getVpCenter()) {
+  if (frameMode) cancelFrameDrawing();
   if (arrowMode) cancelArrowDrawing();
   if (editingArrowId) finishArrowEndpointEditing();
   const origin = CanvasERDDocument.notePositionAt(position);
@@ -766,7 +1747,8 @@ function addNote(position = canvas.getVpCenter()) {
     x: origin.x,
     y: origin.y,
     width: 220,
-    angle: 0
+    angle: 0,
+    ...lastNoteFormatting
   };
   state.notes.push(note);
 
@@ -777,10 +1759,122 @@ function addNote(position = canvas.getVpCenter()) {
   canvas.setActiveObject(object);
   object.enterEditing();
   object.selectAll();
+  updateNoteFormattingControls();
   canvas.requestRenderAll();
   markDirty();
 }
 
+function insertCodeBlock(origin, block) {
+  if (frameMode) cancelFrameDrawing();
+  if (arrowMode) cancelArrowDrawing();
+  if (editingArrowId) finishArrowEndpointEditing();
+  Object.assign(block, {
+    id: globalThis.crypto && crypto.randomUUID ? crypto.randomUUID() : `code-${Date.now()}`,
+    x: origin.x,
+    y: origin.y,
+    angle: 0
+  });
+  state.codeBlocks.push(block);
+
+  const object = createCodeObject(block);
+  codeObjects.set(block.id, object);
+  updateModelDetailToggles();
+  canvas.add(object);
+  restackCanvasObjects();
+  canvas.setActiveObject(object);
+  updateCodeFormattingControls();
+  canvas.requestRenderAll();
+  markDirty();
+  return object;
+}
+
+function addCodeBlock(position = canvas.getVpCenter()) {
+  const object = insertCodeBlock(CanvasERDDocument.notePositionAt(position), {
+    code: "# Double-click to edit",
+    width: 360,
+    language: lastCodeLanguage,
+    source: null
+  });
+  object.enterEditing();
+  object.selectAll();
+}
+
+function openSourceDialog(position = canvas.getVpCenter()) {
+  sourceDialogPosition = position;
+  sourceFormElement.reset();
+  sourceErrorElement.hidden = true;
+  sourceSubmitButton.disabled = false;
+  sourceDialogElement.showModal();
+  sourcePathElement.focus();
+  loadSourceFilePaths();
+}
+
+async function addSourceCodeBlock(event) {
+  event.preventDefault();
+  const source = CanvasERDDocument.sourceFromFields(
+    sourcePathElement.value,
+    sourceStartElement.value,
+    sourceEndElement.value
+  );
+  if (!source) return;
+
+  sourceSubmitButton.disabled = true;
+  try {
+    const result = await fetchSource(source);
+    sourceDialogElement.close();
+    insertCodeBlock(
+      CanvasERDDocument.notePositionAt(sourceDialogPosition),
+      { code: result.code, width: 520, language: result.language, source }
+    );
+  } catch (error) {
+    sourceErrorElement.textContent = error.message;
+    sourceErrorElement.hidden = false;
+  } finally {
+    sourceSubmitButton.disabled = false;
+  }
+}
+
+async function toggleModelDetail(entityId, detail) {
+  const existing = CanvasERDDocument.modelDetailBlock(state.codeBlocks, entityId, detail);
+  if (existing) {
+    state.arrows = state.arrows.filter((arrow) => (
+      ![arrow.start, arrow.end].some((endpoint) => endpoint.attachment?.type === "code" && endpoint.attachment.id === existing.id)
+    ));
+    removeCodeBlock(existing.id);
+    return;
+  }
+
+  const source = { model: entityId, detail };
+  try {
+    const result = await fetchSource(source);
+    const origin = CanvasERDDocument.modelDetailOrigin(state.positions[entityId]);
+    const block = {
+      code: result.code,
+      width: 520,
+      language: result.language,
+      lineNumbers: result.lineNumbers,
+      source
+    };
+    insertCodeBlock(origin, block);
+    state.arrows.push({
+      id: globalThis.crypto && crypto.randomUUID ? crypto.randomUUID() : `arrow-${Date.now()}`,
+      start: { x: 0, y: 0, attachment: { type: "entity", id: entityId, x: 1, y: 0.5 } },
+      end: { x: 0, y: 0, attachment: { type: "code", id: block.id, x: 0, y: 0.5 } },
+      ...CanvasERDDocument.DEFAULT_ARROW_FORMATTING
+    });
+    renderArrows();
+  } catch (error) {
+    showNotice(`Could not show ${detail} for ${entityId}: ${error.message}`, true);
+  }
+}
+
+function updateModelDetailToggles() {
+  tableListElement.querySelectorAll("[data-detail]").forEach((button) => {
+    const block = CanvasERDDocument.modelDetailBlock(state.codeBlocks, button.dataset.entityId, button.dataset.detail);
+    button.setAttribute("aria-pressed", String(Boolean(block)));
+  });
+}
+
 function updateObjectState(object) {
   if (object.canvasErdType === "entity") {
     state.positions[object.entityId] = { x: object.left, y: object.top };
@@ -790,23 +1884,86 @@ function updateObjectState(object) {
     if (!note) return;
     Object.assign(note, CanvasERDDocument.noteStateGeometry(object));
     scheduleRelationshipRender();
+  } else if (object.canvasErdType === "code") {
+    const block = findCodeBlock(object.codeBlockId);
+    if (!block) return;
+    Object.assign(block, CanvasERDDocument.codeStateGeometry(object));
+    scheduleRelationshipRender();
+  } else if (object.canvasErdType === "frame") {
+    const frame = state.frames.find((candidate) => candidate.id === object.frameId);
+    if (!frame) return;
+    Object.assign(frame, {
+      x: object.left,
+      y: object.top,
+      width: object.width * object.scaleX,
+      height: object.height * object.scaleY
+    });
+    const label = frameLabelObjects.get(frame.id);
+    const position = CanvasERDDocument.frameLabelPosition(frame);
+    label?.set({ left: position.x, top: position.y });
+    label?.setCoords();
+  } else if (object.canvasErdType === "frame-label") {
+    const frame = state.frames.find((candidate) => candidate.id === object.frameId);
+    if (!frame) return;
+    frame.label = object.text;
   }
   markDirty();
 }
 
-function removeActiveNote() {
+function removeActiveFrame() {
   const active = canvas.getActiveObject();
-  if (!active || active.canvasErdType !== "note" || active.isEditing) return false;
+  if (!["frame", "frame-label"].includes(active?.canvasErdType) || active.isEditing) return false;
 
+  const frameId = active.frameId;
+  canvas.discardActiveObject();
+  canvas.remove(frameObjects.get(frameId), frameLabelObjects.get(frameId));
+  frameObjects.delete(frameId);
+  frameLabelObjects.delete(frameId);
+  state.frames = state.frames.filter((frame) => frame.id !== frameId);
+  markDirty();
+  return true;
+}
+
+function detachArrows(type, id) {
   state.arrows.forEach((arrow) => {
     [arrow.start, arrow.end].forEach((endpoint) => {
-      if (endpoint.attachment?.type !== "note" || endpoint.attachment.id !== active.noteId) return;
+      if (endpoint.attachment?.type !== type || endpoint.attachment.id !== id) return;
       const point = resolveArrowEndpoint(endpoint);
       endpoint.x = point.x;
       endpoint.y = point.y;
       endpoint.attachment = null;
     });
   });
+}
+
+function removeActiveCodeBlock() {
+  const active = canvas.getActiveObject();
+  if (!active || active.canvasErdType !== "code" || active.isEditing) return false;
+
+  detachArrows("code", active.codeBlockId);
+  removeCodeBlock(active.codeBlockId);
+  return true;
+}
+
+function removeCodeBlock(id) {
+  const object = codeObjects.get(id);
+  clearTimeout(codeHighlightTimers.get(id));
+  codeHighlightTimers.delete(id);
+  if (canvas.getActiveObject() === object) canvas.discardActiveObject();
+  canvas.remove(object);
+  codeObjects.delete(id);
+  state.codeBlocks = state.codeBlocks.filter((block) => block.id !== id);
+  renderArrows();
+  updateModelDetailToggles();
+  markDirty();
+}
+
+function removeActiveNote() {
+  const active = canvas.getActiveObject();
+  if (!active || active.canvasErdType !== "note" || active.isEditing) return false;
+
+  detachArrows("note", active.noteId);
+  canvas.discardActiveObject();
   canvas.remove(active);
   noteObjects.delete(active.noteId);
   state.notes = state.notes.filter((note) => note.id !== active.noteId);
@@ -866,9 +2023,24 @@ function renderTableList() {
     const text = document.createElement("span");
     text.textContent = entity.label;
     row.append(checkbox, text);
+    Object.entries(modelDetails[entity.id] || {}).forEach(([detail, count]) => {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = "detail-toggle";
+      button.dataset.entityId = entity.id;
+      button.dataset.detail = detail;
+      button.textContent = detail;
+      button.title = `Show ${detail} (${count})`;
+      button.addEventListener("click", (event) => {
+        event.preventDefault();
+        toggleModelDetail(entity.id, detail);
+      });
+      row.append(button);
+    });
     fragment.append(row);
   });
   tableListElement.replaceChildren(fragment);
+  updateModelDetailToggles();
 }
 
 function filterTableList() {
@@ -905,6 +2077,7 @@ async function refreshSchema() {
     applicationSchema = schema;
     markDirty();
     showNotice(CanvasERDDocument.changeSummary(result.changes));
+    await refreshSourceCodeBlocks();
   } catch (error) {
     showNotice(`Could not refresh schema: ${error.message}`, true);
   } finally {
@@ -1022,7 +2195,14 @@ async function saveDiagram() {
 
 function displayDocument(documentData) {
   schema = documentData.schema;
-  state = { ...documentData.state, arrows: documentData.state.arrows || [] };
+  state = {
+    ...documentData.state,
+    arrows: documentData.state.arrows || [],
+    frames: documentData.state.frames || [],
+    codeBlocks: documentData.state.codeBlocks || [],
+    tableHeaderColors: documentData.state.tableHeaderColors || {}
+  };
+  if (frameMode) cancelFrameDrawing();
   if (arrowMode) cancelArrowDrawing();
   if (editingArrowId) finishArrowEndpointEditing();
   canvas.discardActiveObject();
@@ -1030,10 +2210,15 @@ function displayDocument(documentData) {
   tableObjects.clear();
   relationshipObjects = [];
   noteObjects.clear();
+  codeObjects.clear();
   arrowObjects.clear();
+  frameObjects.clear();
+  frameLabelObjects.clear();
   renderTableList();
+  renderFrames();
   renderTables();
   renderNotes();
+  renderCodeBlocks();
   renderArrows();
 
   if (Array.isArray(state.viewportTransform) && state.viewportTransform.length === 6) {
@@ -1097,8 +2282,11 @@ async function newDiagram() {
 
 function diagramBounds() {
   const objects = [
+    ...frameObjects.values(),
+    ...frameLabelObjects.values(),
     ...tableObjects.values(),
     ...noteObjects.values(),
+    ...codeObjects.values(),
     ...arrowObjects.values(),
     ...relationshipObjects
   ];
@@ -1141,18 +2329,28 @@ function resizeCanvas() {
 }
 
 function configureCanvasEvents() {
-  canvas.on("mouse:dblclick", ({ target }) => {
-    if (target?.canvasErdType === "arrow") beginArrowEndpointEditing(target.arrowId);
-  });
+  const selectionChanged = () => {
+    closeNoteFormattingMenus();
+    updateNoteFormattingControls();
+    updateTableFormattingControls();
+    updateFrameFormattingControls();
+    updateCodeFormattingControls();
+  };
+  canvas.on("selection:created", selectionChanged);
+  canvas.on("selection:updated", selectionChanged);
+  canvas.on("selection:cleared", selectionChanged);
   canvas.on("mouse:down", ({ target }) => {
     if (editingArrowId && target?.canvasErdType !== "arrow-endpoint") finishArrowEndpointEditing();
+    const arrowId = CanvasERDDocument.arrowIdForEndpointEditing(target);
+    if (arrowId) beginArrowEndpointEditing(arrowId);
   });
   canvas.on("mouse:down", (eventData) => {
     if (!arrowMode || spacePressed) return;
     drawingArrow = {
       id: globalThis.crypto && crypto.randomUUID ? crypto.randomUUID() : `arrow-${Date.now()}`,
       start: arrowEndpoint(eventData),
-      end: arrowEndpoint(eventData)
+      end: arrowEndpoint(eventData),
+      ...CanvasERDDocument.DEFAULT_ARROW_FORMATTING
     };
     renderArrowPreview();
   });
@@ -1164,17 +2362,54 @@ function configureCanvasEvents() {
   canvas.on("mouse:up", (eventData) => {
     if (arrowMode && drawingArrow) finishArrowDrawing(eventData);
   });
+  canvas.on("mouse:up", ({ target, e, isClick }) => {
+    if (!isClick || target?.canvasErdType !== "code") return;
+    const label = target.gutterLabelAt(e);
+    if (label !== null && label !== undefined) toggleCodeLineHighlight(target, label, e.shiftKey);
+  });
+  canvas.on("mouse:move", ({ target, e }) => {
+    if (target?.canvasErdType !== "code") return;
+    const label = target.gutterLabelAt(e);
+    target.hoverCursor = label !== null && label !== undefined ? "pointer" : null;
+  });
+  canvas.on("mouse:down", ({ e, scenePoint }) => {
+    if (!frameMode || spacePressed) return;
+    const point = scenePoint || canvas.getScenePoint(e);
+    drawingFrame = { start: { x: point.x, y: point.y }, end: { x: point.x, y: point.y } };
+    renderFramePreview();
+  });
+  canvas.on("mouse:move", ({ e, scenePoint }) => {
+    if (!frameMode || !drawingFrame) return;
+    const point = scenePoint || canvas.getScenePoint(e);
+    drawingFrame.end = { x: point.x, y: point.y };
+    renderFramePreview();
+  });
+  canvas.on("mouse:up", ({ e, scenePoint }) => {
+    if (!frameMode || !drawingFrame) return;
+    const point = scenePoint || canvas.getScenePoint(e);
+    finishFrameDrawing({ x: point.x, y: point.y });
+  });
 
   canvas.on("object:moving", (eventData) => {
     if (eventData.target.canvasErdType === "arrow-endpoint") updateArrowEndpointHandle(eventData);
     else if (eventData.target.canvasErdType !== "arrow") updateObjectState(eventData.target);
   });
+  canvas.on("object:scaling", ({ target }) => {
+    if (target.canvasErdType === "frame") updateObjectState(target);
+  });
   canvas.on("object:modified", (eventData) => {
     if (eventData.target.canvasErdType === "arrow") updateArrowState(eventData.target);
     else if (eventData.target.canvasErdType === "arrow-endpoint") updateArrowEndpointHandle(eventData);
     else updateObjectState(eventData.target);
   });
-  canvas.on("text:changed", ({ target }) => updateObjectState(target));
+  canvas.on("text:changed", ({ target }) => {
+    if (target.canvasErdType === "code") updateCodeGutter(target);
+    updateObjectState(target);
+    if (target.canvasErdType === "code") scheduleCodeHighlight(target);
+  });
+  canvas.on("text:editing:exited", ({ target }) => {
+    if (target.canvasErdType === "code") scheduleCodeHighlight(target, 0);
+  });
 
   canvas.on("mouse:wheel", ({ e }) => {
     if (e.ctrlKey) {
@@ -1227,8 +2462,21 @@ function configureCanvasEvents() {
   document.addEventListener("keydown", (event) => {
     const editing = canvas.getActiveObject() && canvas.getActiveObject().isEditing;
     const acceptsText = ["INPUT", "TEXTAREA", "SELECT"].includes(event.target.tagName) || event.target.isContentEditable;
+    const noteFormatting = CanvasERDDocument.noteFormattingShortcut(event);
     const action = CanvasERDDocument.shortcutAction(event);
-    const bareAction = ["addNote", "arrow", "toggleTables", "layoutTables", "zoomIn", "zoomOut", "fit", "help"].includes(action);
+    const bareAction = ["addNote", "addCode", "arrow", "toggleTables", "layoutTables", "zoomIn", "zoomOut", "fit", "help"].includes(action);
+
+    if (noteFormatting && activeNoteObject() && (!acceptsText || editing)) {
+      event.preventDefault();
+      if (!event.repeat) {
+        if (CanvasERDDocument.NOTE_PARAGRAPH_STYLES[noteFormatting]) {
+          applyNoteFormatting(CanvasERDDocument.noteParagraphStyleFormatting(noteFormatting));
+        } else {
+          toggleNoteFormatting(noteFormatting);
+        }
+      }
+      return;
+    }
 
     if (action && (!bareAction || (!editing && !acceptsText))) {
       event.preventDefault();
@@ -1245,6 +2493,8 @@ function configureCanvasEvents() {
         newDiagram();
       } else if (action === "addNote") {
         addNote(lastCanvasPointer || canvas.getVpCenter());
+      } else if (action === "addCode") {
+        addCodeBlock(lastCanvasPointer || canvas.getVpCenter());
       } else if (action === "arrow") {
         if (arrowMode) cancelArrowDrawing();
         else setArrowMode(true);
@@ -1264,12 +2514,17 @@ function configureCanvasEvents() {
       return;
     }
 
-    if (event.key === "Escape" && editingArrowId) {
+    if (event.key === "Escape" && closeNoteFormattingMenus()) {
+      event.preventDefault();
+    } else if (event.key === "Escape" && editingArrowId) {
       event.preventDefault();
       finishArrowEndpointEditing();
     } else if (event.key === "Escape" && arrowMode) {
       event.preventDefault();
       cancelArrowDrawing();
+    } else if (event.key === "Escape" && frameMode) {
+      event.preventDefault();
+      cancelFrameDrawing();
     } else if (event.key === "Escape" && !shortcutPanelElement.hidden) {
       event.preventDefault();
       showShortcutHelp(false);
@@ -1278,8 +2533,8 @@ function configureCanvasEvents() {
       spacePressed = true;
       canvas.skipTargetFind = true;
       canvas.setCursor("grab");
-    } else if (["Delete", "Backspace"].includes(event.key) && (
-      removeActiveTables() || removeActiveArrows() || removeActiveNote()
+    } else if (["Delete", "Backspace"].includes(event.key) && !acceptsText && (
+      removeActiveTables() || removeActiveArrows() || removeActiveFrame() || removeActiveNote() || removeActiveCodeBlock()
     )) {
       event.preventDefault();
     }
@@ -1290,8 +2545,8 @@ function configureCanvasEvents() {
     spacePressed = false;
     isPanning = false;
     canvas.skipTargetFind = false;
-    canvas.selection = true;
-    canvas.setCursor(arrowMode ? "crosshair" : "default");
+    canvas.selection = !arrowMode && !frameMode;
+    canvas.setCursor(arrowMode || frameMode ? "crosshair" : "default");
   });
 }
 
@@ -1304,6 +2559,10 @@ function configureControls() {
     if (arrowMode) cancelArrowDrawing();
     else setArrowMode(true);
   });
+  frameButton.addEventListener("click", () => {
+    if (frameMode) cancelFrameDrawing();
+    else setFrameMode(true);
+  });
   saveButton.addEventListener("click", saveDiagram);
   newButton.addEventListener("click", newDiagram);
   openButton.addEventListener("click", () => {
@@ -1336,6 +2595,17 @@ function configureControls() {
     await loadDiagram(filename);
   });
   document.querySelector("#add-note").addEventListener("click", () => addNote());
+  document.querySelector("#add-code").addEventListener("click", () => addCodeBlock());
+  document.querySelector("#add-source").addEventListener("click", () => openSourceDialog());
+  sourceFormElement.addEventListener("submit", addSourceCodeBlock);
+  document.querySelector("#source-cancel").addEventListener("click", () => sourceDialogElement.close());
+  codeSourcePathElement.addEventListener("focus", loadSourceFilePaths);
+  [codeSourcePathElement, codeSourceStartElement, codeSourceEndElement].forEach((element) => {
+    element.addEventListener("change", applyCodeSource);
+  });
+  codeLanguageElement.addEventListener("change", () => applyCodeLanguage(codeLanguageElement.value));
+  codeLineNumbersButton.addEventListener("click", toggleCodeLineNumbers);
+  codeSizeElement.addEventListener("change", () => applyCodeSize(codeSizeElement.value));
   layoutTablesButton.addEventListener("click", layoutTables);
   document.querySelector("#zoom-in").addEventListener("click", () => zoom(1.2));
   document.querySelector("#zoom-out").addEventListener("click", () => zoom(1 / 1.2));
@@ -1343,13 +2613,79 @@ function configureControls() {
   document.querySelector("#select-all").addEventListener("click", () => setAllTables(true));
   document.querySelector("#select-none").addEventListener("click", () => setAllTables(false));
   searchElement.addEventListener("input", filterTableList);
+  noteBoldButton.addEventListener("click", () => toggleNoteFormatting("bold"));
+  noteItalicButton.addEventListener("click", () => toggleNoteFormatting("italic"));
+  noteUnderlineButton.addEventListener("click", () => toggleNoteFormatting("underline"));
+  noteColorControls.forEach((control) => {
+    control.button.addEventListener("click", () => toggleNoteColorMenu(control));
+    control.custom.addEventListener("change", () => {
+      applyNoteFormatting({ [control.property]: control.custom.value });
+      closeNoteFormattingMenus();
+    });
+    control.transparent?.addEventListener("click", () => {
+      applyNoteFormatting({ [control.property]: "transparent" });
+      closeNoteFormattingMenus();
+    });
+  });
+  tableHeaderColorControl.button.addEventListener("click", toggleTableHeaderColorMenu);
+  tableHeaderColorControl.custom.addEventListener("change", () => {
+    applyTableHeaderColor(tableHeaderColorControl.custom.value);
+    closeNoteFormattingMenus();
+  });
+  arrowColorControl.button.addEventListener("click", toggleArrowColorMenu);
+  arrowColorControl.custom.addEventListener("change", () => {
+    applyArrowFormatting({ color: arrowColorControl.custom.value });
+    closeNoteFormattingMenus();
+  });
+  arrowStartHeadElement.addEventListener("change", () => {
+    applyArrowFormatting({ startHead: arrowStartHeadElement.value });
+  });
+  arrowEndHeadElement.addEventListener("change", () => {
+    applyArrowFormatting({ endHead: arrowEndHeadElement.value });
+  });
+  arrowLineStyleElement.addEventListener("change", () => {
+    applyArrowFormatting({ lineStyle: arrowLineStyleElement.value });
+  });
+  arrowStrokeWidthElement.addEventListener("change", () => {
+    applyArrowFormatting({ strokeWidth: arrowStrokeWidthElement.value });
+  });
+  frameColorControl.button.addEventListener("click", toggleFrameColorMenu);
+  frameColorControl.custom.addEventListener("change", () => {
+    applyFrameFormatting({ color: frameColorControl.custom.value });
+    closeNoteFormattingMenus();
+  });
+  frameLineStyleElement.addEventListener("change", () => {
+    applyFrameFormatting({ lineStyle: frameLineStyleElement.value });
+  });
+  document.addEventListener("pointerdown", (event) => {
+    const insideFormatting = noteFormattingElement.contains(event.target) ||
+      tableFormattingElement.contains(event.target) ||
+      arrowFormattingElement.contains(event.target) ||
+      frameFormattingElement.contains(event.target);
+    if (!insideFormatting) closeNoteFormattingMenus();
+  });
+  noteParagraphStyleElement.addEventListener("change", () => {
+    applyNoteFormatting(
+      CanvasERDDocument.noteParagraphStyleFormatting(noteParagraphStyleElement.value)
+    );
+  });
+  noteAlignmentElement.addEventListener("change", () => {
+    applyNoteFormatting({ textAlign: noteAlignmentElement.value });
+  });
 }
 
 function initializeEditor(loadedDocument) {
   schema = loadedDocument.schema;
-  applicationSchema = schema;
+  applicationSchema = loadedDocument.application_schema || schema;
+  currentDiagramFilename = loadedDocument.filename || null;
   state = loadedDocument.state || CanvasERDDocument.createState(schema);
-  state = { ...state, arrows: state.arrows || [] };
+  state = {
+    ...state,
+    arrows: state.arrows || [],
+    frames: state.frames || [],
+    codeBlocks: state.codeBlocks || [],
+    tableHeaderColors: state.tableHeaderColors || {}
+  };
   setDiagramName(loadedDocument.name);
   canvas = new fabric.Canvas("erd-canvas", {
     backgroundColor: "transparent",
@@ -1363,8 +2699,10 @@ function initializeEditor(loadedDocument) {
   configureCanvasEvents();
   configureControls();
   renderTableList();
+  renderFrames();
   renderTables();
   renderNotes();
+  renderCodeBlocks();
   renderArrows();
   if (Array.isArray(state.viewportTransform) && state.viewportTransform.length === 6) {
     canvas.setViewportTransform(state.viewportTransform);
@@ -1373,7 +2711,8 @@ function initializeEditor(loadedDocument) {
     fitDiagram(false);
   }
   new ResizeObserver(resizeCanvas).observe(panelElement);
-  refreshSavedDiagrams().catch((error) => showNotice(`Could not list diagrams: ${error.message}`, true));
+  refreshSavedDiagrams(currentDiagramFilename)
+    .catch((error) => showNotice(`Could not list diagrams: ${error.message}`, true));
   loadingElement.hidden = true;
 }
 
@@ -1384,6 +2723,13 @@ fetch("/api/document", { cache: "no-store" })
   })
   .then(async (loadedDocument) => {
     if (!loadedDocument.state) loadedDocument.state = await createInitialState(loadedDocument.schema);
+    const response = await fetch("/api/highlighting", { cache: "no-store" });
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+    highlighting = await response.json();
+    renderCodeLanguages();
+    const detailsResponse = await fetch("/api/model_details", { cache: "no-store" });
+    if (!detailsResponse.ok) throw new Error(`HTTP ${detailsResponse.status}`);
+    modelDetails = await detailsResponse.json();
     return loadedDocument;
   })
   .then(initializeEditor)