diff --git a/README.md b/README.md
index 949ace1..2a0f177 100644
--- a/README.md
+++ b/README.md
@@ -198,3 +198,6 @@ Express authentication variables
 
 # Issues
 - title conflicting with path, url and slug in `create_raw_menu()`
+- diagrams
+  - generate diagrams from image url and extension
+  - graph properties through code block arguments
diff --git a/astro.config.mjs b/astro.config.mjs
index cecb33e..b7d332a 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,12 +1,15 @@
 import { defineConfig } from 'astro/config';
 import {config} from './config.js'
 import {collect_content} from './integrations/integration-content-structure.js'
-
+import yaml from '@rollup/plugin-yaml';
 
 export default defineConfig({
   integrations: [collect_content(config.collect_content)],
   output: "static",
   outDir: config.outDir,
   base: config.base,
-  trailingSlash: 'ignore'
+  trailingSlash: 'ignore',
+  vite: {
+    plugins: [yaml()]
+  }
 });
diff --git a/config.js b/config.js
index 1abdcdf..0952c3b 100644
--- a/config.js
+++ b/config.js
@@ -16,7 +16,6 @@ const config = {
     base: base,
     content_path: contentdir,
     code_path: `${rootdir}/${outdir}/codes`,
-    plantuml_server: "https://www.plantuml.com/plantuml/svg",
     kroki_server: "https://kroki.io",
     client_menu:true,
     highlighter:{
@@ -32,7 +31,7 @@ config.collect_content = {
     rootdir:config.rootdir,
     contentdir:contentdir,
     content_ext:["md"],
-    assets_ext:["svg","webp","png","jpeg","jpg","xlsx","glb","hdr","ico"],
+    assets_ext:["svg","webp","png","jpeg","jpg","xlsx","glb","hdr","ico","puml"],
     outdir:structuredir,//dist does not persist before build
     out_menu:"public/menu.json",//used by src\layout\client_nav_menu.js
     debug:false
diff --git a/content/examples/code/kroki/readme.md b/content/examples/code/kroki/readme.md
deleted file mode 100644
index 52be0ef..0000000
--- a/content/examples/code/kroki/readme.md
+++ /dev/null
@@ -1,5 +0,0 @@
-```blockdiag
-blockdiag {
-  Kroki -> is -> Awesome;
-}
-```
diff --git a/content/examples/code/long_code.md b/content/examples/code/long_code.md
deleted file mode 100644
index 81b7519..0000000
--- a/content/examples/code/long_code.md
+++ /dev/null
@@ -1,12 +0,0 @@
-
-# Table of content title 1
-
-```js
-console.log("very long sentence with thousand words. very long sentence with thousand words. very long sentence with thousand words. very long sentence with thousand words.")
-```
-
-# generic language code
-
-```
-text code = alpha
-```
diff --git a/content/examples/code/plantuml/readme.md b/content/examples/code/plantuml/readme.md
deleted file mode 100644
index 4383878..0000000
--- a/content/examples/code/plantuml/readme.md
+++ /dev/null
@@ -1,41 +0,0 @@
----
-title: Plantuml
-order: 10
----
-# Plantuml Static integrations
-These integrations use a markdown code block with specific languages
-```
-@startuml
-Michael -> Maria : Message(Hello)
-@enduml
-```
-
-## Remark Plantuml Astro Component
-This code is using `plantuml` code. The remark plugin associated with it is `remark-plantuml-astro` it generates an svg file out of the sequence and only passes a `<data.../>` tag that will be replaced by an `SvgPz` astro component, which can enhance it with features like modal pan zoom or more.
-
-```plantuml my-puml
-@startuml
-Michael -> Maria : Message(Hello)
-@enduml
-```
-
-## Remark Plantuml Svg
-This code is using `plantumlsvg` code. The remark plugin associated with it is `remark-plantuml-svg`, it directly replaces the code block with an svg content.
-
-```plantumlsvg my-puml
-@startuml
-Michael -> Maria : Message(Hello)
-@enduml
-```
-
-## Large sequence
-
-```plantuml my-puml-2
-@startuml
-Michael -> Maria : Message(Hello)
-Maria -> Marco : Message(Hi)
-Marco -> Miranda : Message(Hi there)
-Miranda -> Mario : Message(Hallo)
-Mario -> Mathilda: Message(Hallo)
-@enduml
-```
diff --git a/content/examples/code/readme.md b/content/examples/code/readme.md
index 0469830..34974f7 100644
--- a/content/examples/code/readme.md
+++ b/content/examples/code/readme.md
@@ -1 +1,16 @@
-code
\ No newline at end of file
+---
+title: Code Blocks
+order: 1
+---
+
+# long code
+
+```js
+console.log("very long sentence with thousand words. very long sentence with thousand words. very long sentence with thousand words. very long sentence with thousand words.")
+```
+
+# generic language code
+
+```
+text code = alpha
+```
diff --git a/content/examples/diagrams/readme.md b/content/examples/diagrams/readme.md
new file mode 100644
index 0000000..7bc175c
--- /dev/null
+++ b/content/examples/diagrams/readme.md
@@ -0,0 +1,72 @@
+---
+title: Code Diagrams
+order: 2
+---
+# Block Diagram
+
+```blockdiag
+blockdiag {
+  Kroki -> is -> Awesome;
+}
+```
+# Plantuml
+## Sequence Diagram
+```plantuml
+@startuml
+left to right direction
+skinparam packageStyle rectangle
+skinparam monochrome true
+actor customer
+actor clerk
+rectangle checkout {
+  customer -- (checkout)
+  (checkout) .> (payment) : include
+  (help) .> (checkout) : extends
+  (checkout) -- clerk
+}
+@enduml
+```
+
+## Mind Map
+
+```plantuml my-mind-map
+@startmindmap
+skinparam monochrome true
++ OS
+++ Ubuntu
++++ Linux Mint
++++ Kubuntu
++++ Lubuntu
++++ KDE Neon
+++ LMDE
+++ SolydXK
+++ SteamOS
+++ Raspbian
+-- Windows 95
+-- Windows 98
+-- Windows NT
+--- Windows 8
+--- Windows 10
+@endmindmap
+```
+
+## Work Breakout
+Diagrams can also be linked from a separate file like this
+
+```md
+[Work Breakout](./work-breakout.puml)
+```
+Which will generate the same view as if it was embedded in a code block
+
+[Work Breakout](./work-breakout.puml)
+
+# Mermaid
+
+```mermaid
+graph TD
+  A[ Anyone ] -->|Can help | B( Go to github.com/yuzutech/kroki )
+  B --> C{ How to contribute? }
+  C --> D[ Reporting bugs ]
+  C --> E[ Sharing ideas ]
+  C --> F[ Advocating ]
+```
diff --git a/content/examples/diagrams/work-breakout.puml b/content/examples/diagrams/work-breakout.puml
new file mode 100644
index 0000000..525f554
--- /dev/null
+++ b/content/examples/diagrams/work-breakout.puml
@@ -0,0 +1,14 @@
+@startwbs
+skinparam monochrome true
+* Business Process Modelling WBS
+** Launch the project
+*** Complete Stakeholder Research
+*** Initial Implementation Plan
+** Design phase
+*** Model of AsIs Processes Completed
+**** Model of AsIs Processes Completed1
+**** Model of AsIs Processes Completed2
+*** Measure AsIs performance metrics
+*** Identify Quick Wins
+** Complete innovate phase
+@endwbs
diff --git a/content/examples/gallery/readme.md b/content/examples/gallery/readme.md
index e7d0fb9..fada7fd 100644
--- a/content/examples/gallery/readme.md
+++ b/content/examples/gallery/readme.md
@@ -1,6 +1,6 @@
 ---
 title: Gallery
-order: 2
+order: 3
 ---
 # Gallery
 
diff --git a/content/home/readme.md b/content/home/readme.md
index 7208b80..5dc9b0c 100644
--- a/content/home/readme.md
+++ b/content/home/readme.md
@@ -244,7 +244,7 @@ for item in my_list:
 # Links
 * external link Astro Markdown Render [github repo](https://github.com/MicroWebStacks/astro-markdown-render) link is external and opens in a new page.
 
-* Link to the [Panzoom](/blog/panzoom) entry opens in the same page
+* Link to the [Panzoom](/examples/panzoom) entry opens in the same page
 
 # Diagrams from code
 This is a concept where diagrams are generated from a code block that witholds the description needed to generate them. Note these sorts of diagrams are much more informative for automation and LLMs processing than usual bitmaps or vectorial images.
diff --git a/integrations/create_menu.js b/integrations/create_menu.js
index da98d48..45734c4 100644
--- a/integrations/create_menu.js
+++ b/integrations/create_menu.js
@@ -58,7 +58,6 @@ async function create_raw_menu(content_path,document_list){
     }));
 
     const home_items = sorted_items.map(item => item.link === '/home' ? { ...item, link: '/' } : item);
-    console.log(home_items)
     const icons_file = join(content_path,"icons.yaml")
     if(await exists(icons_file)){
         const icons_list = await load_yaml_abs(icons_file)
diff --git a/package.json b/package.json
index 127c17d..ef2eb6d 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "@google/model-viewer": "^3.4.0",
     "@svgdotjs/svg.js": "^3.1.2",
     "astro": "^4.5.10",
-    "content-structure": "^1.1.4",
+    "content-structure": "^1.1.7",
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
     "datatables.net-dt": "^1.13.7",
@@ -32,7 +32,6 @@
     "passport": "^0.6.0",
     "passport-github": "^1.1.0",
     "photoswipe": "^5.4.3",
-    "plantuml-encoder": "^1.4.0",
     "remark": "^15.0.1",
     "sharp": "^0.33.0",
     "shikiji": "^0.6.10",
@@ -43,5 +42,8 @@
   },
   "engines": {
     "pnpm": ">=8.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-yaml": "^4.1.2"
   }
 }
diff --git a/src/components/markdown/Link.astro b/src/components/markdown/Link.astro
index 84c59d3..544ba07 100644
--- a/src/components/markdown/Link.astro
+++ b/src/components/markdown/Link.astro
@@ -1,9 +1,11 @@
 ---
-import {relAssetToUrl} from '@/libs/assets.js'
+import {relAssetToUrl, file_ext} from '@/libs/assets.js'
 import {toHast} from 'mdast-util-to-hast'
 import {toHtml} from 'hast-util-to-html'
 import ModelViewer from './model/ModelViewer.astro';
 import TableXLSX from './table/TableXLSX.astro';
+import LinkCode from './code/LinkCode.astro';
+import kroki from './code/kroki.yaml'
 
 export interface Props {
     node: object;
@@ -20,9 +22,15 @@ if(!external){
     src = await relAssetToUrl(node.url,dirpath)
   }
 }
-const is_model3d = node.url.endsWith(".glb")
-const is_table = node.url.endsWith(".xlsx")
-const is_link = !is_model3d && !is_table
+
+const ext = file_ext(node.url)
+console.log("-----------------------")
+console.log(ext)
+
+const is_model3d = (ext === "glb")
+const is_table = (ext === "xlsx")
+const is_diagram = Object.keys(kroki.formats).includes(ext)
+const is_link = !is_model3d && !is_table && !is_diagram
 let title = ""
 if((node.children.length>0)&&(node.children[0].type == "text")){
   title = node.children[0].value
@@ -42,7 +50,9 @@ if((node.children.length>0)&&(node.children[0].type == "text")){
         ))}
   </a>
 }
-
+{is_diagram &&
+  <LinkCode ext={ext} url={node.url} dirpath={dirpath} />
+}
 <style>
 a{
     color:rgb(38, 102, 166)
diff --git a/src/components/markdown/code/Code.astro b/src/components/markdown/code/Code.astro
index 135050d..2af0bf3 100644
--- a/src/components/markdown/code/Code.astro
+++ b/src/components/markdown/code/Code.astro
@@ -1,11 +1,11 @@
 ---
 import Highlighter from './Highlighter.astro'
-import Plantuml from './Plantuml.astro'
 import Kroki from './Kroki.astro'
 import ModelViewerCode from '../model/ModelViewerCode.astro';
 import Cards from '../cards/Cards.astro'
 import Gallery from '../../gallery/gallery.astro';
 import Swiper from '../../swiper/swiper.astro'
+import kroki from './kroki.yaml'
 
 export interface Props {
     node: object;
@@ -18,25 +18,19 @@ const code = node.value
 const language = node.lang
 const params = node.meta?node.meta.split(' '):[]
 
-const custom_languages = ["plantuml","mermaid","blockdiag"]
-
 const yaml_glb      = ((language == "yaml") && (node.meta?.startsWith("glb")))
 const yaml_cards    = ((language == "yaml") && (node.meta?.startsWith("cards")))
 const yaml_gallery  = ((language == "yaml") && (node.meta?.startsWith("gallery")))
 const yaml_swiper  = ((language == "yaml") && (node.meta?.startsWith("swiper")))
+
+const is_diagram = kroki.languages.includes(language)
 const custom_yaml = yaml_glb || yaml_cards || yaml_gallery || yaml_swiper
 
-const other_language = (!custom_languages.includes(language) && !custom_yaml)
+const other_language = (!is_diagram && !custom_yaml)
 ---
-{(language == "plantuml")&&
-    <Plantuml code={code} params={params} />
-}
-{(language == "blockdiag")&&
+{(is_diagram)&&
     <Kroki language={language} code={code} params={params} />
 }
-{(language == "mermaid")&&
-    <Kroki language="mermaid" code={code} params={params} />
-}
 {yaml_glb &&
     <ModelViewerCode code={code} dirpath={dirpath}/>
 }
diff --git a/src/components/markdown/code/DiagramCode.astro b/src/components/markdown/code/DiagramCode.astro
index c363411..ee73af0 100644
--- a/src/components/markdown/code/DiagramCode.astro
+++ b/src/components/markdown/code/DiagramCode.astro
@@ -33,6 +33,9 @@ if(params && (params.length > 0)){
 .hidden{
     display:none;
 }
+.diagram{
+    background-color: #fff;
+}
 </style>
 
 <script>
diff --git a/src/components/markdown/code/LinkCode.astro b/src/components/markdown/code/LinkCode.astro
new file mode 100644
index 0000000..19be723
--- /dev/null
+++ b/src/components/markdown/code/LinkCode.astro
@@ -0,0 +1,34 @@
+---
+import Highlighter from './Highlighter.astro'
+import Kroki from './Kroki.astro'
+import ModelViewerCode from '../model/ModelViewerCode.astro';
+import Cards from '../cards/Cards.astro'
+import Gallery from '../../gallery/gallery.astro';
+import Swiper from '../../swiper/swiper.astro'
+import kroki from './kroki.yaml'
+import {join,dirname} from 'path'
+import {config} from '@/config.js'
+import {constants, access, mkdir, readFile, writeFile} from 'fs/promises'
+
+export interface Props {
+    ext: string;
+    url: string;
+    dirpath: string;
+}
+
+const { ext, url, dirpath } = Astro.props as Props;
+
+let language = ""
+let code = ""
+const params = []
+
+const is_kroki = Object.keys(kroki.formats).includes(ext)
+if(is_kroki){
+    language = kroki.formats[ext]
+    const abs_file = join(config.content_path,dirpath,url)
+    code = await readFile(abs_file,'utf-8')
+}
+---
+{(is_kroki)&&
+    <Kroki language={language} code={code} params={params} />
+}
diff --git a/src/components/markdown/code/Mermaid.astro b/src/components/markdown/code/Mermaid.astro
deleted file mode 100644
index 7993415..0000000
--- a/src/components/markdown/code/Mermaid.astro
+++ /dev/null
@@ -1,23 +0,0 @@
----
-
-export interface Props {
-    code: string;
-    params: object;
-}
-
-const { code, params } = Astro.props as Props;
-
-const response = await fetch("https://mermaid.live/svg/",{
-  method: 'POST',
-  body: JSON.stringify({ code: code }),
-  headers: {
-    'Content-Type': 'application/json',
-  },
-})
-
-const  svg_text = await response.text()
-
----
-<div>
-    <Fragment set:html={svg_text}></Fragment>
-</div>
diff --git a/src/components/markdown/code/MermaidCli.astro b/src/components/markdown/code/MermaidCli.astro
deleted file mode 100644
index 68edca2..0000000
--- a/src/components/markdown/code/MermaidCli.astro
+++ /dev/null
@@ -1,30 +0,0 @@
----
-import { run } from "@mermaid-js/mermaid-cli";
-import {promises as fs} from 'fs';
-import {join} from 'path'
-import {config} from '@/config.js'
-import { diagram_cache } from "./diagram.js";
-import DiagramCode from './DiagramCode.astro'
-
-
-export interface Props {
-    code: string;
-    params: object;
-}
-
-const { code, params } = Astro.props as Props;
-
-async function generator(code){
-    const temp_file = join(config.code_path,"temp.mmd")
-    await fs.writeFile(temp_file,code)
-    const out_file = join(config.code_path,"mmd.svg")
-    await run(temp_file, out_file);
-    const svg_text = await fs.readFile(out_file,'utf-8')
-    await fs.unlink(temp_file)
-    await fs.unlink(out_file)
-    return svg_text
-}
-
-const hash = await diagram_cache(code, generator)
----
-<DiagramCode code={code} hash={hash} params={params}/>
diff --git a/src/components/markdown/code/Plantuml.astro b/src/components/markdown/code/Plantuml.astro
deleted file mode 100644
index 67fbffb..0000000
--- a/src/components/markdown/code/Plantuml.astro
+++ /dev/null
@@ -1,24 +0,0 @@
----
-import {diagram_cache} from './diagram.js'
-import plantumlEncoder from "plantuml-encoder";
-import DiagramCode from './DiagramCode.astro'
-import {config} from '@/config.js'
-
-export interface Props {
-    code: string;
-    params: object;
-}
-
-const { code, params } = Astro.props as Props;
-
-async function generator(code){
-    const url = `${config.plantuml_server}/${plantumlEncoder.encode(code)}`;
-    const response = await fetch(url)
-    const svg_text = await response.text()
-    return svg_text
-}
-
-const hash = await diagram_cache(code, generator)
----
-<DiagramCode hash={hash} code={code} params={params} />
-
diff --git a/src/components/markdown/code/kroki.yaml b/src/components/markdown/code/kroki.yaml
new file mode 100644
index 0000000..10dd96b
--- /dev/null
+++ b/src/components/markdown/code/kroki.yaml
@@ -0,0 +1,20 @@
+languages:
+  - graphviz
+  - nwdiag
+  - packetdiag
+  - bytefield
+  - wavedrom
+  - rackdiag
+  - wireviz
+  - vegalite
+  - mermaid
+  - blockdiag
+  - seqdiag
+  - actdiag
+  - pikchr
+  - pikchr
+  - erd
+  - nomnoml
+  - plantuml
+formats:
+  puml: plantuml
diff --git a/src/components/panzoom/panzoom.js b/src/components/panzoom/panzoom.js
index 94753ec..f33f64b 100644
--- a/src/components/panzoom/panzoom.js
+++ b/src/components/panzoom/panzoom.js
@@ -1,10 +1,26 @@
 import {event} from './client_utils.js'
 
-async function add_links(container,url_map){
+function fixSvgSize(svg){
+  if (svg) {
+    // Check if 'width' and 'height' attributes are missing
+    if (!svg.hasAttribute('width') || !svg.hasAttribute('height')) {
+      const viewBox = svg.getAttribute('viewBox');
+      if (viewBox) {
+        const sizes = viewBox.split(' ');
+        // Typically, the viewBox is "minX minY width height"
+        const width = sizes[2];
+        const height = sizes[3];
+
+        svg.setAttribute('width', width);
+        svg.setAttribute('height', height);
+      }
+    }
+  }    
+}
+
+async function add_links(svg,url_map){
   const SVGjsModule = await import('@svgdotjs/svg.js');
   const SVGjs = SVGjsModule.SVG;
-  const obj = container.querySelector("object")
-  const svg = obj.contentDocument.querySelector("svg")
 
   let draw = SVGjs(svg)
   let text_nodes = draw.find('text')
@@ -46,10 +62,13 @@ function init(){
     const container = containers[el]
     const eltype = container.getAttribute("data-type")
     if(eltype == "svg"){
+      const obj = container.querySelector("object")
+      const svg = obj.contentDocument.querySelector("svg")
+      fixSvgSize(svg)
       const url_map_string = container.getAttribute("data-url-map")
       if(url_map_string){
         const url_map = JSON.parse(url_map_string)
-        add_links(container,url_map)
+        add_links(svg,url_map)
       }
     }
 
diff --git a/src/libs/assets.js b/src/libs/assets.js
index caf24dd..09ab640 100644
--- a/src/libs/assets.js
+++ b/src/libs/assets.js
@@ -1,9 +1,10 @@
 import {copyFileSync} from 'fs'
-import {constants, access, stat, mkdir} from 'fs/promises'
+import {constants, access, stat, mkdir, readFile} from 'fs/promises'
 import {dirname,join, basename, extname} from 'path'
 import {config} from '../../config.js'
 import {createHash} from 'crypto';
 
+
 async function exists(filePath) {
     try {
       await access(filePath, constants.F_OK);
@@ -41,6 +42,12 @@ function hashed_filename(filename,hash_text){
     return hashed_file
 }
 
+async function hashed_path_content(abs_path){
+    const text = await readFile(abs_path,'utf-8')
+    const hash = shortMD5(text)
+    return hash
+}
+
 async function relAssetToUrlCopy(relativepath,dirpath){
     const dir_abs = join(config.content_path,dirpath)
     const file_abs = join(dir_abs,relativepath)
@@ -152,6 +159,13 @@ function file_mime(path){
     }
 }
 
+function file_ext(url){
+    url = url.split('?')[0].split('#')[0];
+    const filename = url.substring(url.lastIndexOf('/') + 1);
+    const lastDotIndex = filename.lastIndexOf('.');
+    return (lastDotIndex === -1) ? '' : filename.substring(lastDotIndex + 1)
+}
+
 export{
   assetToUrl,
   relAssetToUrl,
@@ -161,6 +175,8 @@ export{
   contentPathToStaticPath,
   section_from_pathname,
   file_mime,
+  file_ext,
   add_base,
-  remove_base
+  remove_base,
+  hashed_path_content
 }
diff --git a/src/pages/assets/[...path].js b/src/pages/assets/[...path].js
index db22eb0..10305b4 100644
--- a/src/pages/assets/[...path].js
+++ b/src/pages/assets/[...path].js
@@ -33,7 +33,10 @@ export async function getStaticPaths(){
     }
 
     const asset_list = await load_json_abs(join(config.collect_content.outdir,'asset_list.json'))
-    const paths = asset_list.filter((asset)=>(Object.hasOwn(asset,"path"))).map((entry)=>(entry.path))
+    const paths = asset_list.filter((asset)=>(
+        ((asset.type != "link") && (Object.hasOwn(asset,"path"))) ||
+        ((asset.type == "link") && (!asset.external) && asset.filter_ext))
+    ).map((entry)=>(entry.path))
     console.log(`serving API endpoit ${paths.length} assets`)
     return paths.map((path)=>({params:{path:path}}))
 }
diff --git a/src/pages/codes/[...path].js b/src/pages/codes/[...path].js
index dc53921..a1e50ae 100644
--- a/src/pages/codes/[...path].js
+++ b/src/pages/codes/[...path].js
@@ -2,7 +2,8 @@ import { createReadStream } from 'fs';
 import {resolve,join} from 'path'
 import { config } from "@/config";
 import {load_json_abs} from '@/libs/utils.js'
-import {file_mime} from '@/libs/assets.js'
+import {file_mime,hashed_path_content} from '@/libs/assets.js'
+import kroki from '@/components/markdown/code/kroki.yaml'
 
 export async function GET({params}){
     const imagePath = resolve(join(config.code_path,params.path));
@@ -22,15 +23,23 @@ export async function GET({params}){
 export async function getStaticPaths(){
     if(import.meta.env.DEV){
         const asset_list = await load_json_abs(join(config.collect_content.outdir,'asset_list.json'))
-        const codes_diagrams = ["plantuml", "blockdiag", "mermaid"]
         const diagrams = asset_list.filter((asset)=>
-                ((asset.type == "code") && (codes_diagrams.includes(asset.language)))
+            ((asset.type == "code") && (kroki.languages.includes(asset.language)))
             ).map((entry)=>(`${entry.hash}/diagram.svg`))
-        console.log(`serving API endpoit ${diagrams.length} svg code diagrams`)
-    
+        console.log(`serving API endpoit ${diagrams.length} svg code-block diagrams`)
+        
+        const link_diagrams = asset_list.filter((asset)=>
+            ((asset.type == "link") && (asset.external == false) && (Object.keys(kroki.formats).includes(asset.ext)))
+            )
+        
+        const hashPromises = link_diagrams.map(asset => hashed_path_content(join(config.content_path,asset.path)));
+        const hashes = await Promise.all(hashPromises);
+        const link_diagrams_hashes = hashes.map((hash)=>(`${hash}/diagram.svg`))
+        console.log(`serving API endpoit ${link_diagrams.length} svg code-link diagrams`)
+
         const codes = asset_list.filter((asset)=>((asset.type == "code"))).map((entry)=>(`${entry.hash}/code.txt`))
-        console.log(`serving API endpoit ${codes.length} text code blocks`)
-        const paths = [...diagrams, ...codes]
+        console.log(`serving API endpoit ${codes.length} text code-blocks`)
+        const paths = [...diagrams, ...codes, ...link_diagrams_hashes]
         return paths.map((path)=>({params:{path:path}}))
     }else{
         return []