diff --git a/DOCUMENTOR-GUIDE.md b/DOCUMENTOR-GUIDE.md
index 2a66f11..947a6f4 100644
--- a/DOCUMENTOR-GUIDE.md
+++ b/DOCUMENTOR-GUIDE.md
@@ -153,4 +153,7 @@ In resources/doc-likec4/views.c4:
 
 Embed in Markdown:
 {{< likec4-view view="overview" project="documentation-platform" >}}
+
+With custom title:
+{{< likec4-view view="overview" project="documentation-platform" title="Platform Overview" >}}
 ```
diff --git a/content/en/docs/architecture/highlevelarch.md b/content/en/docs/architecture/highlevelarch.md
index 757cb2d..2119302 100644
--- a/content/en/docs/architecture/highlevelarch.md
+++ b/content/en/docs/architecture/highlevelarch.md
@@ -10,53 +10,7 @@ This document describes the high-level architecture of our Enterprise Developmen
 
 ## Interactive Architecture Diagram
 
-<div class="likec4-container">
-    <div class="likec4-header">
-        Enterprise Development Platform - OTC FaaS Deployment Architecture
-    </div>
-    <likec4-view view-id="otc-faas" browser="true"></likec4-view>
-    <div class="likec4-loading" id="likec4-loading">
-        Loading architecture diagram...
-    </div>
-</div>
-
-<script>
-// Enhanced loading check with fallback
-document.addEventListener('DOMContentLoaded', function() {
-    let attempts = 0;
-    const maxAttempts = 10;
-
-    function checkLikeC4Loading() {
-        attempts++;
-        const component = document.querySelector('likec4-view');
-        const loading = document.getElementById('likec4-loading');
-
-        if (component && component.shadowRoot && component.shadowRoot.children.length > 0) {
-            if (loading) loading.style.display = 'none';
-            console.log('LikeC4 component loaded successfully');
-        } else if (attempts >= maxAttempts) {
-            console.warn('LikeC4 component failed to load');
-            if (loading) {
-                loading.innerHTML = 'Interactive diagram failed to load. <br><small>Please ensure JavaScript is enabled and the webcomponent is generated.</small>';
-                loading.style.color = '#dc3545';
-            }
-        } else {
-            setTimeout(checkLikeC4Loading, 1000);
-        }
-    }
-
-    // Check if LikeC4 loader is available
-    if (typeof window.customElements !== 'undefined') {
-        setTimeout(checkLikeC4Loading, 1500);
-    } else {
-        const loading = document.getElementById('likec4-loading');
-        if (loading) {
-            loading.innerHTML = 'Interactive diagrams require a modern browser with JavaScript enabled.';
-            loading.style.color = '#dc3545';
-        }
-    }
-});
-</script>
+{{< likec4-view view="otc-faas" project="architecture" title="Enterprise Development Platform - OTC FaaS Deployment Architecture" >}}
 
 {{< alert title="Interactive Diagram" >}}
 The diagram above is interactive when viewed in a compatible browser.
diff --git a/content/en/docs/documentation/quick-reference.md b/content/en/docs/documentation/quick-reference.md
index 8c5c407..ad083b3 100644
--- a/content/en/docs/documentation/quick-reference.md
+++ b/content/en/docs/documentation/quick-reference.md
@@ -134,12 +134,19 @@ description: >
 {{< likec4-view view="view-name" project="project-name" >}}
 ```
 
+### Parameters
+
+- `view` (required) - The view ID from your LikeC4 model
+- `project` (optional, default: "architecture") - The LikeC4 project name
+- `title` (optional, default: "Architecture View: {view}") - Custom header text above the diagram
+
 ### Examples
 
 ```markdown
 {{< likec4-view view="overview" project="documentation-platform" >}}
 {{< likec4-view view="localDevelopment" project="documentation-platform" >}}
 {{< likec4-view view="cicdPipeline" project="documentation-platform" >}}
+{{< likec4-view view="otc-faas" project="architecture" title="OTC FaaS Deployment" >}}
 ```
 
 ## LikeC4 Commands
diff --git a/resources/doc-likec4/README.md b/resources/doc-likec4/README.md
index 7699375..4591393 100644
--- a/resources/doc-likec4/README.md
+++ b/resources/doc-likec4/README.md
@@ -66,6 +66,17 @@ In your Markdown files:
 {{< likec4-view view="overview" project="documentation-platform" >}}
 ```
 
+Optional parameters:
+- `view` (required) - The view ID from your LikeC4 model
+- `project` (optional, default: "architecture") - The LikeC4 project name
+- `title` (optional, default: "Architecture View: {view}") - Custom header text
+
+Example with custom title:
+
+```markdown
+{{< likec4-view view="overview" project="documentation-platform" title="Complete Documentation Platform" >}}
+```
+
 ## Configuration
 
 - `likec4.config.json` - Project configuration
diff --git a/resources/edp-likec4/INTEGRATION.md b/resources/edp-likec4/INTEGRATION.md
index 09cad8b..9a73472 100644
--- a/resources/edp-likec4/INTEGRATION.md
+++ b/resources/edp-likec4/INTEGRATION.md
@@ -46,11 +46,26 @@ This creates `static/js/likec4-webcomponent.js` which contains all your architec
 
 ## Using in Hugo Content
 
-Add interactive diagrams to any Markdown page:
+### Using the Shortcode (Recommended)
+
+The simplest way to embed diagrams:
 
 ```markdown
 ## Architecture Overview
 
+{{< likec4-view view="otc-faas" project="architecture" title="OTC FaaS Deployment Architecture" >}}
+```
+
+**Parameters:**
+- `view` (required) - The view ID from your LikeC4 model
+- `project` (optional, default: "architecture") - The LikeC4 project name
+- `title` (optional, default: "Architecture View: {view}") - Custom header text
+
+### Manual HTML (Alternative)
+
+If you need more control:
+
+```markdown
 <div class="likec4-container">
     <div class="likec4-header">
         System Architecture - High Level View