lutaml 0.10.6 → 0.10.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7d14c7a5bae3898f5e06b776dd0ccd99585a31dc8e64b46399f5b72300723b74
-  data.tar.gz: 589966db805d8628b18553b40422d87897953733b39afcecbe575068f00328dd
+  metadata.gz: 84ecefe8a15ae033ee203318b3db70ac20ea3f727d4a94cb98ffdd6444f0111f
+  data.tar.gz: afe30e1675098ee1248114e4999117b0b8b159c902ae304e5d4b8212ac801bfa
 SHA512:
-  metadata.gz: e9d7775ce3d857dcc2aade2b031b290d25ed836a403b523144529504432b6c70329a7f1afcedbfbf8993456ede5503d2285e17faf43a5e56a85d7675a302ca92
-  data.tar.gz: 02aad1765ea02693cfe909e0bded8c0b39fe7590a8476ffd0afce505d3fd5757834b7fdf725bea739f7a8898a4f4d50560c3e5f7a84a241f2b0e532d4be18706
+  metadata.gz: 4ac75c14a3991c8b7885f4fc62fbe29640be5fe7b4d2cc9a5abfc01c585e038dd50a495a69cdab4483fb6840671b1a1ab35a66263e570c1da7cc005ce9fda626
+  data.tar.gz: 92f724a84ddfc10d49800a2f118bdc31d6d80054d9238a2feacc0a1f9e74312ea1fc96ac95b58893f5ec24d88f1fbe09f2b2eff64be6b45f879208babfa162b8

data/.rubocop_todo.yml

@@ -1,102 +1,21 @@
 # This configuration was generated by
 # `rubocop --auto-gen-config`
-# on 2026-05-06 18:53:03 UTC using RuboCop version 1.86.1.
+# on 2026-05-07 04:34:28 UTC using RuboCop version 1.86.1.
 # The point is for the user to remove these configuration records
 # one by one as the offenses are removed from the code base.
 # Note that changes in the inspected code, or installation of new
 # versions of RuboCop, may require this file to be generated again.
 
-# Offense count: 8
+# Offense count: 7
 # This cop supports safe autocorrection (--autocorrect).
 # Configuration parameters: EnforcedStyle, IndentationWidth.
 # SupportedStyles: with_first_argument, with_fixed_indentation
 Layout/ArgumentAlignment:
   Exclude:
-    - 'lib/lutaml/qea/factory/generalization_builder.rb'
-    - 'lib/lutaml/uml_repository/exporters/markdown_exporter.rb'
-    - 'lib/lutaml/uml_repository/static_site/data_transformer.rb'
-    - 'lib/lutaml/uml_repository/static_site/serializers/inheritance_resolver.rb'
-
-# Offense count: 11
-# This cop supports safe autocorrection (--autocorrect).
-# Configuration parameters: EnforcedStyleAlignWith.
-# SupportedStylesAlignWith: either, start_of_block, start_of_line
-Layout/BlockAlignment:
-  Exclude:
-    - 'lib/lutaml/qea/factory/class_transformer.rb'
-    - 'lib/lutaml/uml_repository/exporters/markdown/class_page_builder.rb'
-    - 'lib/lutaml/uml_repository/static_site/serializers/inheritance_resolver.rb'
-    - 'lib/lutaml/uml_repository/static_site/serializers/package_serializer.rb'
-    - 'lib/lutaml/uml_repository/static_site/serializers/package_tree_builder.rb'
-    - 'spec/lutaml/uml_repository/package_exporter_spec.rb'
-    - 'spec/lutaml/uml_repository/static_site/template_file_system_spec.rb'
-
-# Offense count: 11
-# This cop supports safe autocorrection (--autocorrect).
-Layout/BlockEndNewline:
-  Exclude:
-    - 'lib/lutaml/qea/factory/class_transformer.rb'
-    - 'lib/lutaml/uml_repository/exporters/markdown/class_page_builder.rb'
-    - 'lib/lutaml/uml_repository/static_site/serializers/inheritance_resolver.rb'
-    - 'lib/lutaml/uml_repository/static_site/serializers/package_serializer.rb'
-    - 'lib/lutaml/uml_repository/static_site/serializers/package_tree_builder.rb'
-    - 'spec/lutaml/uml_repository/package_exporter_spec.rb'
-    - 'spec/lutaml/uml_repository/static_site/template_file_system_spec.rb'
-
-# Offense count: 2
-# This cop supports safe autocorrection (--autocorrect).
-Layout/ClosingParenthesisIndentation:
-  Exclude:
-    - 'lib/lutaml/uml_repository/static_site/data_transformer.rb'
-
-# Offense count: 1
-# This cop supports safe autocorrection (--autocorrect).
-Layout/ElseAlignment:
-  Exclude:
-    - 'lib/lutaml/uml_repository/static_site/data_transformer.rb'
-
-# Offense count: 16
-# This cop supports safe autocorrection (--autocorrect).
-Layout/EmptyLineAfterGuardClause:
-  Exclude:
-    - 'lib/lutaml/qea/factory/association_builder.rb'
-    - 'lib/lutaml/uml/inheritance_walker.rb'
-    - 'lib/lutaml/uml_repository/static_site/data_transformer.rb'
-    - 'lib/lutaml/uml_repository/static_site/serializers/class_serializer.rb'
-    - 'lib/lutaml/uml_repository/static_site/serializers/diagram_serializer.rb'
-    - 'lib/lutaml/uml_repository/static_site/serializers/inheritance_resolver.rb'
-    - 'lib/lutaml/uml_repository/static_site/serializers/package_serializer.rb'
-
-# Offense count: 4
-# This cop supports safe autocorrection (--autocorrect).
-# Configuration parameters: EmptyLineBetweenMethodDefs, EmptyLineBetweenClassDefs, EmptyLineBetweenModuleDefs, DefLikeMacros, AllowAdjacentOneLineDefs, NumberOfEmptyLines.
-Layout/EmptyLineBetweenDefs:
-  Exclude:
-    - 'lib/lutaml/cli/interactive_shell/command_base.rb'
-
-# Offense count: 1
-# This cop supports safe autocorrection (--autocorrect).
-Layout/EmptyLinesAfterModuleInclusion:
-  Exclude:
-    - 'lib/lutaml/uml_repository/repository.rb'
-
-# Offense count: 1
-# This cop supports safe autocorrection (--autocorrect).
-# Configuration parameters: EnforcedStyleAlignWith.
-# SupportedStylesAlignWith: keyword, variable, start_of_line
-Layout/EndAlignment:
-  Exclude:
-    - 'lib/lutaml/uml_repository/static_site/data_transformer.rb'
-
-# Offense count: 2
-# This cop supports safe autocorrection (--autocorrect).
-# Configuration parameters: EnforcedStyle, IndentationWidth.
-# SupportedStyles: consistent, consistent_relative_to_receiver, special_for_inner_method_call, special_for_inner_method_call_in_parentheses
-Layout/FirstArgumentIndentation:
-  Exclude:
-    - 'lib/lutaml/uml_repository/static_site/data_transformer.rb'
+    - 'lib/lutaml/uml_repository/static_site/generator.rb'
+    - 'spec/lutaml/uml_repository/static_site/serializers/diagram_serializer_spec.rb'
 
-# Offense count: 2
+# Offense count: 6
 # This cop supports safe autocorrection (--autocorrect).
 # Configuration parameters: AllowMultipleStyles, EnforcedHashRocketStyle, EnforcedColonStyle, EnforcedLastArgumentHashStyle.
 # SupportedHashRocketStyles: key, separator, table
@@ -104,59 +23,21 @@ Layout/FirstArgumentIndentation:
 # SupportedLastArgumentHashStyles: always_inspect, always_ignore, ignore_implicit, ignore_explicit
 Layout/HashAlignment:
   Exclude:
-    - 'lib/lutaml/uml_repository/static_site/serializers/class_serializer.rb'
-    - 'spec/lutaml/uml_repository/package_exporter_spec.rb'
+    - 'spec/lutaml/uml_repository/static_site/serializers/diagram_serializer_spec.rb'
 
-# Offense count: 24
-# This cop supports safe autocorrection (--autocorrect).
-# Configuration parameters: Width, EnforcedStyleAlignWith, AllowedPatterns.
-# SupportedStylesAlignWith: start_of_line, relative_to_receiver
-Layout/IndentationWidth:
-  Exclude:
-    - 'lib/lutaml/qea/factory/class_transformer.rb'
-    - 'lib/lutaml/uml_repository/exporters/markdown/class_page_builder.rb'
-    - 'lib/lutaml/uml_repository/static_site/data_transformer.rb'
-    - 'lib/lutaml/uml_repository/static_site/serializers/inheritance_resolver.rb'
-    - 'lib/lutaml/uml_repository/static_site/serializers/package_serializer.rb'
-    - 'lib/lutaml/uml_repository/static_site/serializers/package_tree_builder.rb'
-    - 'spec/lutaml/uml_repository/package_exporter_spec.rb'
-    - 'spec/lutaml/uml_repository/static_site/template_file_system_spec.rb'
-
-# Offense count: 192
+# Offense count: 175
 # This cop supports safe autocorrection (--autocorrect).
 # Configuration parameters: Max, AllowHeredoc, AllowURI, AllowQualifiedName, URISchemes, AllowRBSInlineAnnotation, AllowCopDirectives, AllowedPatterns, SplitStrings.
 # URISchemes: http, https
 Layout/LineLength:
   Enabled: false
 
-# Offense count: 1
-# This cop supports safe autocorrection (--autocorrect).
-# Configuration parameters: EnforcedStyle.
-# SupportedStyles: symmetrical, new_line, same_line
-Layout/MultilineMethodCallBraceLayout:
-  Exclude:
-    - 'lib/lutaml/uml_repository/static_site/data_transformer.rb'
-
-# Offense count: 2
-# This cop supports safe autocorrection (--autocorrect).
-# Configuration parameters: EnforcedStyle, EnforcedStyleForEmptyBraces.
-# SupportedStyles: space, no_space, compact
-# SupportedStylesForEmptyBraces: space, no_space
-Layout/SpaceInsideHashLiteralBraces:
-  Exclude:
-    - 'lib/lutaml/uml/model_helpers.rb'
-
-# Offense count: 11
+# Offense count: 3
 # This cop supports safe autocorrection (--autocorrect).
 # Configuration parameters: AllowInHeredoc.
 Layout/TrailingWhitespace:
   Exclude:
-    - 'lib/lutaml/qea/factory/generalization_builder.rb'
-    - 'lib/lutaml/uml_repository/exporters/markdown_exporter.rb'
-    - 'lib/lutaml/uml_repository/static_site/data_transformer.rb'
-    - 'lib/lutaml/uml_repository/static_site/serializers/class_serializer.rb'
-    - 'lib/lutaml/uml_repository/static_site/serializers/inheritance_resolver.rb'
-    - 'spec/lutaml/uml_repository/package_exporter_spec.rb'
+    - 'spec/lutaml/uml_repository/static_site/serializers/diagram_serializer_spec.rb'
 
 # Offense count: 1
 Lint/BinaryOperatorWithIdenticalOperands:
@@ -209,13 +90,6 @@ Lint/MissingSuper:
   Exclude:
     - 'lib/lutaml/uml_repository/lazy_repository.rb'
 
-# Offense count: 2
-# This cop supports safe autocorrection (--autocorrect).
-Lint/RedundantRequireStatement:
-  Exclude:
-    - 'lib/lutaml/qea/factory/generalization_builder.rb'
-    - 'lib/lutaml/uml_repository/static_site/serializers/inheritance_resolver.rb'
-
 # Offense count: 1
 # This cop supports safe autocorrection (--autocorrect).
 # Configuration parameters: AllowUnusedKeywordArguments, IgnoreEmptyMethods, IgnoreNotImplementedMethods, NotImplementedExceptions.
@@ -245,7 +119,7 @@ Metrics/BlockLength:
 Metrics/CyclomaticComplexity:
   Enabled: false
 
-# Offense count: 66
+# Offense count: 67
 # Configuration parameters: CountComments, CountAsOne, AllowedMethods, AllowedPatterns.
 Metrics/MethodLength:
   Max: 62
@@ -320,7 +194,7 @@ RSpec/ContextWording:
 RSpec/DescribeClass:
   Enabled: false
 
-# Offense count: 651
+# Offense count: 654
 # Configuration parameters: CountAsOne.
 RSpec/ExampleLength:
   Max: 30
@@ -374,7 +248,7 @@ RSpec/MessageSpies:
     - 'spec/lutaml/uml_repository/presenters/diagram_presenter_spec.rb'
     - 'spec/lutaml/uml_repository/repository_spec.rb'
 
-# Offense count: 37
+# Offense count: 38
 RSpec/MultipleExpectations:
   Max: 6
 
@@ -396,6 +270,12 @@ RSpec/NoExpectationExample:
     - 'spec/lutaml/qea/verification/comprehensive_equivalence_spec.rb'
     - 'spec/lutaml/uml_repository/static_site/generator_spec.rb'
 
+# Offense count: 6
+# This cop supports unsafe autocorrection (--autocorrect-all).
+RSpec/ReceiveMessages:
+  Exclude:
+    - 'spec/lutaml/uml_repository/static_site/serializers/diagram_serializer_spec.rb'
+
 # Offense count: 12
 RSpec/RepeatedExample:
   Exclude:
@@ -420,6 +300,12 @@ RSpec/SpecFilePathFormat:
     - 'spec/lutaml/parsers/serialize_xmi_to_liquid_spec.rb'
     - 'spec/lutaml/uml_repository/web_ui/app_spec.rb'
 
+# Offense count: 10
+# This cop supports unsafe autocorrection (--autocorrect-all).
+RSpec/VerifiedDoubleReference:
+  Exclude:
+    - 'spec/lutaml/uml_repository/static_site/serializers/diagram_serializer_spec.rb'
+
 # Offense count: 3
 Security/Eval:
   Exclude:
@@ -430,23 +316,6 @@ Security/MarshalLoad:
   Exclude:
     - 'lib/lutaml/uml_repository/package_loader.rb'
 
-# Offense count: 15
-# This cop supports safe autocorrection (--autocorrect).
-# Configuration parameters: EnforcedStyle, ProceduralMethods, FunctionalMethods, AllowedMethods, AllowedPatterns, AllowBracesOnProceduralOneLiners, BracesRequiredMethods.
-# SupportedStyles: line_count_based, semantic, braces_for_chaining, always_braces
-# ProceduralMethods: benchmark, bm, bmbm, create, each_with_object, measure, new, realtime, tap, with_object
-# FunctionalMethods: let, let!, subject, watch
-# AllowedMethods: lambda, proc, it
-Style/BlockDelimiters:
-  Exclude:
-    - 'lib/lutaml/qea/factory/class_transformer.rb'
-    - 'lib/lutaml/uml_repository/exporters/markdown/class_page_builder.rb'
-    - 'lib/lutaml/uml_repository/static_site/serializers/inheritance_resolver.rb'
-    - 'lib/lutaml/uml_repository/static_site/serializers/package_serializer.rb'
-    - 'lib/lutaml/uml_repository/static_site/serializers/package_tree_builder.rb'
-    - 'spec/lutaml/uml_repository/package_exporter_spec.rb'
-    - 'spec/lutaml/uml_repository/static_site/template_file_system_spec.rb'
-
 # Offense count: 2
 # This cop supports safe autocorrection (--autocorrect).
 Style/ComparableClamp:
@@ -464,19 +333,6 @@ Style/EvalWithLocation:
   Exclude:
     - 'spec/lutaml/cli/uml/search_command_spec.rb'
 
-# Offense count: 1
-# This cop supports safe autocorrection (--autocorrect).
-Style/MultilineTernaryOperator:
-  Exclude:
-    - 'lib/lutaml/uml_repository/static_site/data_transformer.rb'
-
-# Offense count: 1
-# This cop supports safe autocorrection (--autocorrect).
-# Configuration parameters: AllowMethodComparison, ComparisonsThreshold.
-Style/MultipleComparison:
-  Exclude:
-    - 'lib/lutaml/cli/interactive_shell.rb'
-
 # Offense count: 1
 # This cop supports unsafe autocorrection (--autocorrect-all).
 Style/PartitionInsteadOfDoubleSelect:
@@ -489,19 +345,3 @@ Style/SafeNavigationChainLength:
   Exclude:
     - 'lib/lutaml/qea/validation/attribute_validator.rb'
     - 'lib/lutaml/qea/validation/operation_validator.rb'
-
-# Offense count: 1
-# This cop supports safe autocorrection (--autocorrect).
-# Configuration parameters: EnforcedStyleForMultiline.
-# SupportedStylesForMultiline: comma, consistent_comma, diff_comma, no_comma
-Style/TrailingCommaInArguments:
-  Exclude:
-    - 'lib/lutaml/qea/factory/class_transformer.rb'
-
-# Offense count: 2
-# This cop supports safe autocorrection (--autocorrect).
-# Configuration parameters: EnforcedStyleForMultiline.
-# SupportedStylesForMultiline: comma, consistent_comma, diff_comma, no_comma
-Style/TrailingCommaInHashLiteral:
-  Exclude:
-    - 'lib/lutaml/cli/interactive_shell.rb'

data/lib/lutaml/cli/uml/spa_command.rb

@@ -47,6 +47,9 @@ module Lutaml
                                      desc: "Minify HTML/CSS/JS output"
           thor_class.option :theme, type: :string, default: "light",
                                     desc: "Default theme: 'light' or 'dark'"
+          thor_class.option :render_diagrams, type: :boolean, default: false,
+                                              desc: "Render diagram SVGs " \
+                                                    "(may increase output size)"
         end
 
         def run(input_path) # rubocop:disable Metrics/AbcSize,Metrics/MethodLength
@@ -169,6 +172,7 @@ module Lutaml
             title: options[:title] || "UML Model Browser",
             minify: options[:minify] || false,
             theme: options[:theme] || "light",
+            render_diagrams: options[:render_diagrams] || false,
           }
 
           Lutaml::UmlRepository::StaticSite.generate(repository,

data/lib/lutaml/uml_repository/static_site/generator.rb

@@ -164,7 +164,8 @@ module Lutaml
             include_diagrams: config_opts["include_diagrams"] != false,
             format_definitions: config_opts["format_definitions"] != false,
             max_definition_length: config_opts["max_definition_length"],
-          }.merge(@options.slice(:include_diagrams, :format_definitions))
+          }.merge(@options.slice(:include_diagrams, :format_definitions,
+                                 :render_diagrams))
         end
 
         def search_options
@@ -358,6 +359,7 @@ module Lutaml
             "03-layout.css",
             "04-components.css",
             "05-utilities.css",
+            "06-diagrams.css",
           ]
 
           css_parts = css_files.map do |file|

data/lib/lutaml/uml_repository/static_site/serializers/diagram_serializer.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require_relative "../../presenters/diagram_presenter"
+
 module Lutaml
   module UmlRepository
     module StaticSite
@@ -25,13 +27,31 @@ module Lutaml
           private
 
           def serialize(diagram, id)
-            {
+            data = {
               id: id,
               xmiId: diagram.xmi_id,
               name: diagram.name,
               type: diagram.diagram_type,
               package: find_diagram_package(diagram),
+              objectCount: (diagram.diagram_objects || []).size,
+              linkCount: (diagram.diagram_links || []).size,
             }
+
+            if @options[:render_diagrams]
+              svg = render_svg(diagram)
+              data[:svg] = svg if svg
+            end
+
+            data
+          end
+
+          def render_svg(diagram)
+            return nil unless diagram.diagram_objects&.any?
+
+            presenter = Presenters::DiagramPresenter.new(diagram, @repository)
+            presenter.svg_output
+          rescue StandardError
+            nil
           end
 
           def find_diagram_package(diagram)

data/lib/lutaml/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Lutaml
-  VERSION = "0.10.6"
+  VERSION = "0.10.7"
 end

data/templates/static_site/assets/scripts/core/state.js

@@ -10,9 +10,10 @@ document.addEventListener('alpine:init', () => {
     config: window.APP_CONFIG || {},
 
     // Current State
-    currentView: 'welcome',  // 'welcome' | 'package' | 'class' | 'search'
+    currentView: 'welcome',  // 'welcome' | 'package' | 'class' | 'search' | 'diagram'
     currentPackage: null,
     currentClass: null,
+    currentDiagram: null,
     searchQuery: '',
     searchResults: [],
 
@@ -86,6 +87,7 @@ document.addEventListener('alpine:init', () => {
       this.currentView = 'welcome';
       this.currentPackage = null;
       this.currentClass = null;
+      this.currentDiagram = null;
       this.breadcrumbs = [];
       this.pushState();
     },
@@ -118,6 +120,21 @@ document.addEventListener('alpine:init', () => {
       this.pushState();
     },
 
+    selectDiagram(diagramId) {
+      if (!this.data || !this.data.diagrams[diagramId]) {
+        console.warn('Diagram not found:', diagramId);
+        return;
+      }
+
+      const diag = this.data.diagrams[diagramId];
+
+      this.currentDiagram = diagramId;
+      this.currentPackage = diag.package;
+      this.currentView = 'diagram';
+      this.updateBreadcrumbs();
+      this.pushState();
+    },
+
     performSearch(query) {
       if (!query || query.length < 2) {
         this.searchResults = [];
@@ -196,6 +213,8 @@ document.addEventListener('alpine:init', () => {
         this.breadcrumbs = this.buildPackageBreadcrumbs(this.currentPackage);
       } else if (this.currentView === 'class' && this.currentClass) {
         this.breadcrumbs = this.buildClassBreadcrumbs(this.currentClass);
+      } else if (this.currentView === 'diagram' && this.currentDiagram) {
+        this.breadcrumbs = [{ name: `Diagram: ${this.data.diagrams[this.currentDiagram]?.name || ''}`, type: 'diagram' }];
       } else if (this.currentView === 'search') {
         this.breadcrumbs = [{ name: `Search: ${this.searchQuery}`, type: 'search' }];
       }
@@ -275,6 +294,8 @@ document.addEventListener('alpine:init', () => {
         this.selectPackage(decodeURIComponent(parts[1]));
       } else if (parts[0] === 'class' && parts[1]) {
         this.selectClass(decodeURIComponent(parts[1]));
+      } else if (parts[0] === 'diagram' && parts[1]) {
+        this.selectDiagram(decodeURIComponent(parts[1]));
       } else if (parts[0] === 'search') {
         const params = new URLSearchParams(queryString);
         const query = params.get('q');
@@ -294,6 +315,8 @@ document.addEventListener('alpine:init', () => {
         hash = `#/package/${encodeURIComponent(this.currentPackage)}`;
       } else if (this.currentView === 'class' && this.currentClass) {
         hash = `#/class/${encodeURIComponent(this.currentClass)}`;
+      } else if (this.currentView === 'diagram' && this.currentDiagram) {
+        hash = `#/diagram/${encodeURIComponent(this.currentDiagram)}`;
       } else if (this.currentView === 'search' && this.searchQuery) {
         hash = `#/search?q=${encodeURIComponent(this.searchQuery)}`;
       }
@@ -370,6 +393,7 @@ function app() {
     get currentView() { return Alpine.store('app').currentView; },
     get currentPackage() { return Alpine.store('app').currentPackage; },
     get currentClass() { return Alpine.store('app').currentClass; },
+    get currentDiagram() { return Alpine.store('app').currentDiagram; },
     get sidebarVisible() {
       return Alpine.store('app').sidebarVisible;
     },
@@ -392,6 +416,9 @@ function app() {
     selectClass(id) {
       Alpine.store('app').selectClass(id);
     },
+    selectDiagram(id) {
+      Alpine.store('app').selectDiagram(id);
+    },
     toggleTheme() {
       Alpine.store('app').toggleTheme();
     },

data/templates/static_site/assets/styles/06-diagrams.css

@@ -274,4 +274,52 @@
   .diagram-wrapper svg {
     filter: brightness(0.9);
   }
+}
+
+/* Inline Diagram Viewer (content pane) */
+.diagram-toolbar {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.75rem 0;
+  margin-bottom: 1rem;
+}
+
+.diagram-toolbar .btn-sm {
+  padding: 0.375rem 0.75rem;
+  font-size: 0.8rem;
+  background: var(--bg-secondary, #f8f9fa);
+  border: 1px solid var(--color-border, #dcdfe6);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.diagram-toolbar .btn-sm:hover {
+  background: var(--color-primary, #3498db);
+  color: white;
+  border-color: var(--color-primary, #3498db);
+}
+
+.diagram-svg-container {
+  background: white;
+  border: 1px solid var(--color-border, #dcdfe6);
+  border-radius: 8px;
+  padding: 1rem;
+  overflow: hidden;
+  transition: transform 0.1s ease-out;
+  min-height: 400px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.diagram-svg-container svg {
+  max-width: 100%;
+  display: block;
+}
+
+.diagram-item .diagram-objects {
+  font-size: 0.8rem;
+  color: var(--color-text-secondary, #7f8c8d);
+  margin-left: auto;
 }

data/templates/static_site/components/content.liquid

@@ -73,7 +73,7 @@
             <h3>Diagrams (<span x-text="pkg.diagrams.length"></span>)</h3>
             <ul class="diagram-list">
               <template x-for="diagramId in pkg.diagrams" :key="diagramId">
-                <li class="diagram-item">
+                <li class="diagram-item clickable-row" @click="$store.app.selectDiagram(diagramId)">
                   <svg class="item-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                     <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                     <line x1="3" y1="9" x2="21" y2="9"></line>
@@ -81,6 +81,7 @@
                   </svg>
                   <span class="diagram-name" x-text="$store.app.data.diagrams[diagramId] && $store.app.data.diagrams[diagramId].name"></span>
                   <span class="diagram-type" x-text="$store.app.data.diagrams[diagramId] && `(${$store.app.data.diagrams[diagramId].type})`"></span>
+                  <span class="diagram-objects" x-show="$store.app.data.diagrams[diagramId] && $store.app.data.diagrams[diagramId].objectCount" x-text="`${$store.app.data.diagrams[diagramId].objectCount} objects`"></span>
                 </li>
               </template>
             </ul>
@@ -503,6 +504,75 @@
           </template>
         </div>
       </div>
+
+    <!-- Diagram View -->
+    <div x-show="currentView === 'diagram'" x-transition class="view-diagram">
+      <template x-if="currentDiagram && data.diagrams[currentDiagram]">
+        <div class="diagram-details" x-data="{
+          get diag() { return data.diagrams[currentDiagram]; },
+          get pkg() { return diag.package ? data.packages[diag.package] : null; },
+          diagramScale: 1.0,
+          diagramPanX: 0,
+          diagramPanY: 0,
+          isPanning: false,
+          panStartX: 0,
+          panStartY: 0,
+          zoom(factor) { this.diagramScale = Math.max(0.1, Math.min(5.0, this.diagramScale * factor)); },
+          resetView() { this.diagramScale = 1.0; this.diagramPanX = 0; this.diagramPanY = 0; },
+          startPan(e) { this.isPanning = true; this.panStartX = e.clientX - this.diagramPanX; this.panStartY = e.clientY - this.diagramPanY; },
+          doPan(e) { if (!this.isPanning) return; this.diagramPanX = e.clientX - this.panStartX; this.diagramPanY = e.clientY - this.panStartY; },
+          endPan() { this.isPanning = false; },
+          downloadSvg() {
+            const svgEl = document.querySelector('.diagram-svg-container svg');
+            if (!svgEl) return;
+            const data = new XMLSerializer().serializeToString(svgEl);
+            const blob = new Blob([data], { type: 'image/svg+xml' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url; a.download = (this.diag.name || 'diagram').replace(/[^a-zA-Z0-9_-]/g, '_') + '.svg';
+            a.click(); URL.revokeObjectURL(url);
+          }
+        }">
+          <div class="entity-header">
+            <div class="entity-title">
+              <h1 class="entity-name" x-text="diag.name"></h1>
+              <p class="entity-subtitle">
+                <span x-text="diag.type"></span>
+                <span x-show="diag.objectCount"> - <span x-text="diag.objectCount"></span> elements, <span x-text="diag.linkCount"></span> connectors</span>
+              </p>
+            </div>
+            <div style="display: flex; gap: 0.5rem; align-items: center;">
+              <button class="link-button" x-show="diag.package" @click="selectPackage(diag.package)">
+                &larr; Back to package
+              </button>
+              <span class="entity-type-badge">Diagram</span>
+            </div>
+          </div>
+
+          <div class="diagram-toolbar" x-show="diag.svg">
+            <button class="btn btn-sm" @click="zoom(1.2)">Zoom In</button>
+            <button class="btn btn-sm" @click="zoom(0.8)">Zoom Out</button>
+            <button class="btn btn-sm" @click="resetView()">Reset</button>
+            <button class="btn btn-sm" @click="downloadSvg()">Download SVG</button>
+          </div>
+
+          <div class="diagram-svg-container"
+               x-show="diag.svg"
+               x-ref="diagramContainer"
+               @wheel.prevent="zoom($event.deltaY > 0 ? 0.9 : 1.1)"
+               @mousedown="startPan($event)"
+               @mousemove="doPan($event)"
+               @mouseup="endPan()"
+               @mouseleave="endPan()"
+               :style="`transform: translate(${diagramPanX}px, ${diagramPanY}px) scale(${diagramScale}); transform-origin: center; cursor: ${isPanning ? 'grabbing' : 'grab'};`">
+            <div x-html="diag.svg"></div>
+          </div>
+
+          <div x-show="!diag.svg" class="empty-state">
+            <p class="empty-state-message">SVG rendering not available for this diagram. Re-generate with <code>--render-diagrams</code> to include SVG.</p>
+          </div>
+        </div>
+      </template>
     </div>
-  </div>
-</main>
+
+  </div>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: lutaml
 version: !ruby/object:Gem::Version
-  version: 0.10.6
+  version: 0.10.7
 platform: ruby
 authors:
 - Ribose Inc.