@diagrammo/dgmo 0.7.3 → 0.8.0

package/src/class/renderer.ts

@@ -10,14 +10,14 @@ import {
   LEGEND_HEIGHT,
   LEGEND_PILL_PAD,
   LEGEND_PILL_FONT_SIZE,
-  LEGEND_PILL_FONT_W,
   LEGEND_CAPSULE_PAD,
   LEGEND_DOT_R,
   LEGEND_ENTRY_FONT_SIZE,
-  LEGEND_ENTRY_FONT_W,
   LEGEND_ENTRY_DOT_GAP,
   LEGEND_ENTRY_TRAIL,
+  measureLegendText,
 } from '../utils/legend-constants';
+import { TITLE_FONT_SIZE, TITLE_FONT_WEIGHT, TITLE_Y } from '../utils/title-constants';
 import type { PaletteColors } from '../palettes';
 import { mix } from '../palettes/color-utils';
 import type { ParsedClassDiagram, ClassModifier, RelationshipType } from './types';
@@ -97,7 +97,7 @@ const LEGEND_GROUP_NAME = 'Type';
 function legendEntriesWidth(entries: ClassLegendEntry[]): number {
   let w = 0;
   for (const e of entries) {
-    w += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + e.label.length * LEGEND_ENTRY_FONT_W + LEGEND_ENTRY_TRAIL;
+    w += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + measureLegendText(e.label, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_TRAIL;
   }
   return w;
 }
@@ -286,11 +286,11 @@ export function renderClassDiagram(
       .append('text')
       .attr('class', 'chart-title')
       .attr('x', width / 2)
-      .attr('y', 30)
+      .attr('y', TITLE_Y)
       .attr('text-anchor', 'middle')
       .attr('fill', palette.text)
-      .attr('font-size', '20px')
-      .attr('font-weight', '700')
+      .attr('font-size', TITLE_FONT_SIZE)
+      .attr('font-weight', TITLE_FONT_WEIGHT)
       .style('cursor', onClickItem && parsed.titleLineNumber ? 'pointer' : 'default')
       .text(parsed.title);
 
@@ -313,7 +313,7 @@ export function renderClassDiagram(
       ? mix(palette.surface, palette.bg, 50)
       : mix(palette.surface, palette.bg, 30);
 
-    const pillWidth = LEGEND_GROUP_NAME.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+    const pillWidth = measureLegendText(LEGEND_GROUP_NAME, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
     const pillH = LEGEND_HEIGHT - LEGEND_CAPSULE_PAD * 2;
     const entriesW = legendEntriesWidth(legendEntries);
 
@@ -391,7 +391,7 @@ export function renderClassDiagram(
           .attr('font-family', FONT_FAMILY)
           .text(entry.label);
 
-        entryX += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + entry.label.length * LEGEND_ENTRY_FONT_W + LEGEND_ENTRY_TRAIL;
+        entryX += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + measureLegendText(entry.label, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_TRAIL;
       }
     } else {
       // Collapsed: single muted pill

package/src/cli.ts

@@ -158,7 +158,7 @@ Key options:
 - \`--theme <theme>\` — \`light\` (default), \`dark\`, \`transparent\`
 - \`--palette <name>\` — \`nord\` (default), \`solarized\`, \`catppuccin\`, \`rose-pine\`, \`gruvbox\`, \`tokyo-night\`, \`one-dark\`, \`bold\`
 - \`--copy\` — copy the URL to clipboard (use with \`-o url\`)
-- \`--no-branding\` — omit diagrammo.app branding from exports
+- \`--branding\` — add diagrammo.app branding to exports
 - \`--chart-types\` — list all supported chart types
 
 ## Supported Chart Types
@@ -503,7 +503,7 @@ Options:
   --c4-system <name>   System to drill into (with --c4-level containers or components)
   --c4-container <name> Container to drill into (with --c4-level components)
   --tag-group <name>   Pre-select a tag group for static export coloring
-  --no-branding        Omit diagrammo.app branding from exports
+  --branding           Add diagrammo.app branding to exports
   --copy               Copy URL to clipboard (only with -o url)
   --json               Output structured JSON to stdout
   --chart-types        List all supported chart types
@@ -533,7 +533,7 @@ function parseArgs(argv: string[]): {
   palette: string;
   help: boolean;
   version: boolean;
-  noBranding: boolean;
+  branding: boolean;
   copy: boolean;
   json: boolean;
   chartTypes: boolean;
@@ -552,7 +552,7 @@ function parseArgs(argv: string[]): {
     palette: 'nord',
     help: false,
     version: false,
-    noBranding: false,
+    branding: false,
     copy: false,
     json: false,
     chartTypes: false,
@@ -619,8 +619,8 @@ function parseArgs(argv: string[]): {
     } else if (arg === '--tag-group') {
       result.tagGroup = args[++i];
       i++;
-    } else if (arg === '--no-branding') {
-      result.noBranding = true;
+    } else if (arg === '--branding') {
+      result.branding = true;
       i++;
     } else if (arg === '--json') {
       result.json = true;
@@ -985,7 +985,7 @@ async function main(): Promise<void> {
   // eslint-disable-next-line no-control-regex
   content = content.replace(/\x1b\[[0-9;]*m/g, '');
 
-  // Resolve org chart imports (tags: and import: directives)
+  // Resolve org chart imports (tags and import directives)
   if (opts.input && parseDgmoChartType(content) === 'org') {
     const inputPath = resolve(opts.input);
     const resolved = await resolveOrgImports(
@@ -1115,7 +1115,7 @@ async function main(): Promise<void> {
   const svg = await render(content, {
     theme: opts.theme,
     palette: opts.palette,
-    branding: !opts.noBranding,
+    branding: opts.branding,
     c4Level: opts.c4Level,
     c4System: opts.c4System,
     c4Container: opts.c4Container,

package/src/colors.ts

@@ -49,7 +49,10 @@ export const colorNames: Record<string, string> = {
 export function resolveColor(
   color: string,
   palette?: { colors: Record<string, string> }
-): string {
+): string | null {
+  // Reject hex color codes — only named colors are supported
+  if (color.startsWith('#')) return null;
+
   const lower = color.toLowerCase();
 
   if (palette) {