Add hypermedia feature to README

A new section has been added to the README that highlights the hypermedia feature of the tool, which generates class diagrams with clickable links leading directly to the source code. This section also provides guidance on how to enable this feature and integrate the SVG diagrams into HTML while preserving the clickable links.
smeghead · Jul 9, 2024 · 70252d6 · 70252d6
1 parent 3744569
commit 70252d6
Showing 1 changed file with 33 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -8,6 +8,7 @@ A CLI tool that parses the PHP source directory and generates PlantUML class dia
 
  * ♻️ Generating class diagrams from source code contributes to continuous design improvement.
  * 🔖  It produces expressive class diagrams with a focus on namespaces and relationships.
+ * 🌐 Diagrams are interactive hypermedia tools, allowing you to click on class boxes to navigate directly to the source code, enhancing understanding both visually and interactively.
  * 🔧 This simple CLI tool is easy to use.
  * 💡 Additionally, it can generate a package relationship diagram to visualize dependencies on external namespaces.
 
@@ -16,6 +17,38 @@ A CLI tool that parses the PHP source directory and generates PlantUML class dia
 > [PlantUML - Wikipedia](https://en.wikipedia.org/wiki/PlantUML)
 > PlantUML is an open-source tool allowing users to create diagrams from a plain text language. Besides various UML diagrams, PlantUML has support for various other software development related formats (such as Archimate, Block diagram, BPMN, C4, Computer network diagram, ERD, Gantt chart, Mind map, and WBD), as well as visualisation of JSON and YAML files.
 
+## Hypermedia Feature
+
+One of the standout features of this tool is the ability to generate class diagrams with clickable links that navigate directly to the source code of those classes. This transforms the diagrams into interactive hypermedia tools, enhancing the understanding of the source code visually and interactively.
+
+To enable this feature, generate the diagrams in SVG format and use the `--svg-topurl` option to specify the base URL for the links:
+
+```shell
+$ vendor/bin/php-class-diagram --svg-topurl='https://github.com/your-username/your-repo/blob/main/path/to/source' path/to/php/files
+```
+
+To embed the SVG diagrams in HTML while preserving the clickable links, use the `embed` or `object` tags instead of `img`. Here’s an example:
+
+```html
+<html lang="en">
+<head>
+    <title>PHP Class Diagram</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        embed {
+            width: 100%;
+            height: auto;
+        }
+    </style>
+</head>
+<body>
+    <embed type="image/svg+xml" src="php-class-diagram.svg"/>
+</body>
+</html>
+```
+
+This ensures that the SVG image is responsive and the hyperlinks remain functional.
+
 ## Dogfooding
 
 ### php-class-diagram class diagram (linked SVG file)