@diagrammo/dgmo 0.2.28 → 0.3.0

package/docs/language-reference.md

@@ -441,7 +441,10 @@ Animal
   + speak(): void
 
 Dog extends Animal
+  + breed: string
+
 Cat extends Animal
+  + indoor: boolean
 ```
 
 Full example:
@@ -453,38 +456,37 @@ title: Type Hierarchy
 Printable [interface]
   + print(): void
 
-Shape [abstract]
+Shape implements Printable [abstract]
   # x: number
   # y: number
   + area(): number
-  {static} count: number
+  count: number {static}
 
-Circle
+Circle extends Shape
   - radius: number
   + area(): number
 
-Rectangle
+Rectangle extends Shape
   - width: number
   - height: number
 
-Circle extends Shape
-Rectangle extends Shape
-Shape implements Printable
 Shape *-- Circle : contains
 ```
 
 **Class modifiers**: `[abstract]`, `[interface]`, `[enum]`
 
+**Inheritance**: `ClassName extends Parent` or `ClassName implements Interface` — declared inline in the class header. Members are indented below.
+
 **Member visibility**: `+` public, `#` protected, `-` private. Static: `{static}`.
 
-**Relationships** (keyword or arrow):
-- Inheritance: `A extends B` or `A --|> B`
-- Implementation: `A implements B` or `A ..|> B`
-- Composition: `A contains B` or `A *-- B`
-- Aggregation: `A has B` or `A o-- B`
-- Dependency: `A uses B` or `A ..> B`
+**Relationships** (arrow syntax):
+- Inheritance: `A --|> B`
+- Implementation: `A ..|> B`
+- Composition: `A *-- B`
+- Aggregation: `A o-- B`
+- Dependency: `A ..> B`
 - Association: `A -> B`
-- Optional label: `A extends B : description`
+- Optional label: `A *-- B : description`
 
 ### er
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diagrammo/dgmo",
-  "version": "0.2.28",
+  "version": "0.3.0",
   "description": "DGMO diagram markup language — parser, renderer, and color system",
   "license": "MIT",
   "type": "module",
@@ -50,11 +50,11 @@
     "d3-scale": "^4.0.2",
     "d3-selection": "^3.0.0",
     "d3-shape": "^3.2.0",
-    "echarts": "^5.6.0",
+    "echarts": "^6.0.0",
     "lz-string": "^1.5.0"
   },
   "optionalDependencies": {
-    "jsdom": "^26.0.0"
+    "jsdom": "^28.1.0"
   },
   "devDependencies": {
     "@types/d3-array": "^3.2.1",
@@ -63,11 +63,11 @@
     "@types/d3-scale": "^4.0.8",
     "@types/d3-selection": "^3.0.11",
     "@types/d3-shape": "^3.1.7",
-    "@types/dagre": "^0.7.53",
-    "@types/jsdom": "^21.1.7",
+    "@types/dagre": "^0.7.54",
+    "@types/jsdom": "^28.0.0",
     "jscpd": "^4.0.8",
     "tsup": "^8.5.1",
     "typescript": "^5.7.3",
-    "vitest": "^3.0.0"
+    "vitest": "^4.0.18"
   }
 }

package/src/class/layout.ts

@@ -87,7 +87,7 @@ function computeNodeDimensions(node: ClassNode): {
   const headerHeight = HEADER_BASE + (node.modifier ? MODIFIER_BADGE : 0);
 
   // Fields compartment
-  let fieldsHeight = 0;
+  let fieldsHeight: number;
   if (isEnum) {
     // Enum values go in fields compartment
     const enumValues = node.members; // all members are enum values
@@ -96,6 +96,8 @@ function computeNodeDimensions(node: ClassNode): {
         COMPARTMENT_PADDING_Y * 2 +
         enumValues.length * MEMBER_LINE_HEIGHT +
         SEPARATOR_HEIGHT;
+    } else {
+      fieldsHeight = SEPARATOR_HEIGHT + COMPARTMENT_PADDING_Y;
     }
   } else {
     if (fields.length > 0) {
@@ -103,24 +105,27 @@ function computeNodeDimensions(node: ClassNode): {
         COMPARTMENT_PADDING_Y * 2 +
         fields.length * MEMBER_LINE_HEIGHT +
         SEPARATOR_HEIGHT;
+    } else {
+      // UML: always show attributes compartment
+      fieldsHeight = SEPARATOR_HEIGHT + COMPARTMENT_PADDING_Y;
     }
   }
 
   // Methods compartment (not for enums)
   let methodsHeight = 0;
-  if (!isEnum && methods.length > 0) {
-    methodsHeight =
-      COMPARTMENT_PADDING_Y * 2 +
-      methods.length * MEMBER_LINE_HEIGHT +
-      SEPARATOR_HEIGHT;
+  if (!isEnum) {
+    if (methods.length > 0) {
+      methodsHeight =
+        COMPARTMENT_PADDING_Y * 2 +
+        methods.length * MEMBER_LINE_HEIGHT +
+        SEPARATOR_HEIGHT;
+    } else {
+      // UML: always show methods compartment
+      methodsHeight = SEPARATOR_HEIGHT + COMPARTMENT_PADDING_Y;
+    }
   }
 
-  // If no members at all, add minimal padding
-  const height =
-    headerHeight +
-    fieldsHeight +
-    methodsHeight +
-    (fieldsHeight === 0 && methodsHeight === 0 ? 4 : 0);
+  const height = headerHeight + fieldsHeight + methodsHeight;
 
   return { width, height, headerHeight, fieldsHeight, methodsHeight };
 }

package/src/class/parser.ts

@@ -6,7 +6,6 @@ import type {
   ParsedClassDiagram,
   ClassNode,
   ClassMember,
-  ClassRelationship,
   ClassModifier,
   MemberVisibility,
   RelationshipType,
@@ -24,14 +23,9 @@ function classId(name: string): string {
 // Regex patterns
 // ============================================================
 
-// Class declaration: ClassName [modifier] (color)
+// Class declaration: ClassName [extends|implements ParentClass] [modifier] (color)
 const CLASS_DECL_RE =
-  /^([A-Z][A-Za-z0-9_]*)(?:\s+\[(abstract|interface|enum)\])?(?:\s+\(([^)]+)\))?\s*$/;
-
-// Relationship — keyword syntax:
-// ClassName extends|implements|contains|has|uses TargetClass : label
-const REL_KEYWORD_RE =
-  /^([A-Z][A-Za-z0-9_]*)\s+(extends|implements|contains|has|uses)\s+([A-Z][A-Za-z0-9_]*)(?:\s*:\s*(.+))?$/;
+  /^([A-Z][A-Za-z0-9_]*)(?:\s+(extends|implements)\s+([A-Z][A-Za-z0-9_]*))?(?:\s+\[(abstract|interface|enum)\])?(?:\s+\(([^)]+)\))?\s*$/;
 
 // Relationship — arrow syntax:
 // ClassName --|> TargetClass : label
@@ -45,14 +39,6 @@ const STATIC_SUFFIX_RE = /\{static\}\s*$/;
 const METHOD_RE = /^(.+?)\(([^)]*)\)(?:\s*:\s*(.+))?$/;
 const FIELD_RE = /^(.+?)\s*:\s*(.+)$/;
 
-const KEYWORD_TO_TYPE: Record<string, RelationshipType> = {
-  extends: 'extends',
-  implements: 'implements',
-  contains: 'composes',
-  has: 'aggregates',
-  uses: 'depends',
-};
-
 const ARROW_TO_TYPE: Record<string, RelationshipType> = {
   '--|>': 'extends',
   '..|>': 'implements',
@@ -257,28 +243,6 @@ export function parseClassDiagram(
     currentClass = null;
     contentStarted = true;
 
-    // Try relationship — keyword syntax
-    const relKeyword = trimmed.match(REL_KEYWORD_RE);
-    if (relKeyword) {
-      const sourceName = relKeyword[1];
-      const keyword = relKeyword[2].toLowerCase();
-      const targetName = relKeyword[3];
-      const label = relKeyword[4]?.trim();
-
-      // Ensure both classes exist
-      getOrCreateClass(sourceName, lineNumber);
-      getOrCreateClass(targetName, lineNumber);
-
-      result.relationships.push({
-        source: classId(sourceName),
-        target: classId(targetName),
-        type: KEYWORD_TO_TYPE[keyword],
-        ...(label && { label }),
-        lineNumber,
-      });
-      continue;
-    }
-
     // Try relationship — arrow syntax
     const relArrow = trimmed.match(REL_ARROW_RE);
     if (relArrow) {
@@ -305,8 +269,10 @@ export function parseClassDiagram(
     const classDecl = trimmed.match(CLASS_DECL_RE);
     if (classDecl) {
       const name = classDecl[1];
-      const modifier = classDecl[2] as ClassModifier | undefined;
-      const colorName = classDecl[3]?.trim();
+      const relKeyword = classDecl[2] as 'extends' | 'implements' | undefined;
+      const parentName = classDecl[3];
+      const modifier = classDecl[4] as ClassModifier | undefined;
+      const colorName = classDecl[5]?.trim();
       const color = colorName ? resolveColor(colorName, palette) : undefined;
 
       const node = getOrCreateClass(name, lineNumber);
@@ -315,6 +281,17 @@ export function parseClassDiagram(
       // Update line number to the declaration line (may have been created by relationship)
       node.lineNumber = lineNumber;
 
+      // Inline extends/implements creates a relationship
+      if (relKeyword && parentName) {
+        getOrCreateClass(parentName, lineNumber);
+        result.relationships.push({
+          source: classId(name),
+          target: classId(parentName),
+          type: relKeyword as RelationshipType,
+          lineNumber,
+        });
+      }
+
       currentClass = node;
       continue;
     }
@@ -376,9 +353,10 @@ export function looksLikeClassDiagram(content: string): boolean {
         hasModifier = true;
         hasClassDecl = true;
       }
-      // Check for relationship keywords
-      if (REL_KEYWORD_RE.test(trimmed)) {
+      // Check for inline extends/implements in class declaration
+      if (/^[A-Z][A-Za-z0-9_]*\s+(extends|implements)\s+[A-Z]/.test(trimmed)) {
         hasRelationship = true;
+        hasClassDecl = true;
       }
       // Check for relationship arrows
       if (REL_ARROW_RE.test(trimmed)) {

package/src/class/renderer.ts

@@ -406,43 +406,42 @@ export function renderClassDiagram(
     const methods = node.members.filter((m) => m.isMethod);
 
     if (isEnum) {
-      // Enum: all members as values
-      if (node.members.length > 0) {
-        // Separator
-        nodeG.append('line')
-          .attr('x1', -w / 2)
-          .attr('y1', yPos)
-          .attr('x2', w / 2)
-          .attr('y2', yPos)
-          .attr('stroke', stroke)
-          .attr('stroke-width', 0.5)
-          .attr('stroke-opacity', 0.5);
-
-        let memberY = yPos + COMPARTMENT_PADDING_Y;
-        for (const member of node.members) {
-          nodeG.append('text')
-            .attr('x', -w / 2 + MEMBER_PADDING_X)
-            .attr('y', memberY + MEMBER_LINE_HEIGHT / 2)
-            .attr('dominant-baseline', 'central')
-            .attr('fill', palette.text)
-            .attr('font-size', MEMBER_FONT_SIZE)
-            .text(member.name);
-          memberY += MEMBER_LINE_HEIGHT;
-        }
+      // Enum: single values compartment
+      // Separator
+      nodeG.append('line')
+        .attr('x1', -w / 2)
+        .attr('y1', yPos)
+        .attr('x2', w / 2)
+        .attr('y2', yPos)
+        .attr('stroke', stroke)
+        .attr('stroke-width', 0.5)
+        .attr('stroke-opacity', 0.5);
+
+      let memberY = yPos + COMPARTMENT_PADDING_Y;
+      for (const member of node.members) {
+        nodeG.append('text')
+          .attr('x', -w / 2 + MEMBER_PADDING_X)
+          .attr('y', memberY + MEMBER_LINE_HEIGHT / 2)
+          .attr('dominant-baseline', 'central')
+          .attr('fill', palette.text)
+          .attr('font-size', MEMBER_FONT_SIZE)
+          .text(member.name);
+        memberY += MEMBER_LINE_HEIGHT;
       }
     } else {
-      // Fields compartment
-      if (fields.length > 0) {
-        // Separator
-        nodeG.append('line')
-          .attr('x1', -w / 2)
-          .attr('y1', yPos)
-          .attr('x2', w / 2)
-          .attr('y2', yPos)
-          .attr('stroke', stroke)
-          .attr('stroke-width', 0.5)
-          .attr('stroke-opacity', 0.5);
+      // UML 3-compartment layout: always show both separators
+
+      // Fields separator
+      nodeG.append('line')
+        .attr('x1', -w / 2)
+        .attr('y1', yPos)
+        .attr('x2', w / 2)
+        .attr('y2', yPos)
+        .attr('stroke', stroke)
+        .attr('stroke-width', 0.5)
+        .attr('stroke-opacity', 0.5);
 
+      if (fields.length > 0) {
         let memberY = yPos + COMPARTMENT_PADDING_Y;
         for (const field of fields) {
           const vis = visibilitySymbol(field.visibility);
@@ -463,21 +462,20 @@ export function renderClassDiagram(
 
           memberY += MEMBER_LINE_HEIGHT;
         }
-        yPos += node.fieldsHeight;
       }
+      yPos += node.fieldsHeight;
+
+      // Methods separator
+      nodeG.append('line')
+        .attr('x1', -w / 2)
+        .attr('y1', yPos)
+        .attr('x2', w / 2)
+        .attr('y2', yPos)
+        .attr('stroke', stroke)
+        .attr('stroke-width', 0.5)
+        .attr('stroke-opacity', 0.5);
 
-      // Methods compartment
       if (methods.length > 0) {
-        // Separator
-        nodeG.append('line')
-          .attr('x1', -w / 2)
-          .attr('y1', yPos)
-          .attr('x2', w / 2)
-          .attr('y2', yPos)
-          .attr('stroke', stroke)
-          .attr('stroke-width', 0.5)
-          .attr('stroke-opacity', 0.5);
-
         let memberY = yPos + COMPARTMENT_PADDING_Y;
         for (const method of methods) {
           const vis = visibilitySymbol(method.visibility);