From 850cd944875ef43ab30635bd12e57d4e29831ef9 Mon Sep 17 00:00:00 2001 From: Baivab Sarkar Date: Tue, 23 Jun 2026 01:01:00 +0530 Subject: [PATCH 01/11] feat: add Insert Diagram modal with previews and search filter --- index.html | 44 +++++++ script.js | 327 +++++++++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 185 ++++++++++++++++++++++++++++++ 3 files changed, 556 insertions(+) diff --git a/index.html b/index.html index 7a509a4..3daff8b 100644 --- a/index.html +++ b/index.html @@ -385,6 +385,7 @@

Menu

+
@@ -842,6 +843,49 @@

Open-source credits

+ + + `; } - // Render the actual diagram template code dynamically! - const html = marked.parse(t.code); - const sanitized = sanitizePreviewHtml(html); - previewDiv.innerHTML = sanitized; + previewDiv.innerHTML = displayHtml; const labelDiv = document.createElement('div'); labelDiv.className = 'diagram-card-label'; @@ -5838,213 +5835,15 @@ document.addEventListener("DOMContentLoaded", async function () { card.classList.add('is-selected'); if (previewCode) previewCode.value = t.code.trim(); - renderSelectedDiagramPreview(previewContainer, t.code); + previewContainer.innerHTML = t.svg; confirmBtn.disabled = false; }); grid.appendChild(card); }); - - // Render the actual diagram output inside all visible cards! - processDiagramsInContainer(grid); - } - - function renderSelectedDiagramPreview(container, code) { - const html = marked.parse(code); - const sanitized = sanitizePreviewHtml(html); - container.innerHTML = sanitized; - processDiagramsInContainer(container); } - function processDiagramsInContainer(container) { - const roots = [container]; - - try { - const mermaidNodes = queryPreviewRoots(roots, '.mermaid'); - if (mermaidNodes.length > 0) { - const renderMermaidNodes = function() { - initMermaid(false); - Promise.resolve(mermaid.init(undefined, mermaidNodes)) - .then(() => { - addMermaidToolbars(); - }) - .catch((e) => { - console.warn("Mermaid rendering failed in container:", e); - addMermaidToolbars(); - }); - }; - if (typeof mermaid === 'undefined') { - loadScript(CDN.mermaid).then(function() { - initMermaid(true); - renderMermaidNodes(); - }).catch(function(e) { console.warn('Failed to load mermaid:', e); }); - } else { - renderMermaidNodes(); - } - } - } catch (e) { - console.warn("Mermaid rendering failed:", e); - } - - try { - const abcNodes = queryPreviewRoots(roots, '.abc-notation'); - if (abcNodes.length > 0) { - abcNodes.forEach(node => { - const originalCode = node.getAttribute('data-original-code'); - if (!originalCode) return; - const decodedCode = decodeURIComponent(originalCode); - try { - node.innerHTML = ''; - ABCJS.renderAbc(node.id, decodedCode, { - responsive: "resize", - add_classes: true - }); - node.innerHTML = DOMPurify.sanitize(node.innerHTML, PREVIEW_SANITIZE_OPTIONS); - } catch (err) { - console.warn("ABC notation rendering failed:", err); - } - }); - } - } catch (e) { - console.warn("ABC rendering failed:", e); - } - - try { - const plantumlNodes = queryPreviewRoots(roots, '.plantuml-diagram'); - if (plantumlNodes.length > 0) { - plantumlNodes.forEach(node => { - const containerEl = node.closest('.plantuml-container'); - const originalCode = node.getAttribute('data-original-code'); - if (!originalCode) return; - const decodedCode = decodeURIComponent(originalCode); - try { - let modifiedCode = decodedCode; - if (!modifiedCode.toLowerCase().includes('backgroundcolor')) { - const lines = modifiedCode.split('\n'); - let inserted = false; - for (let i = 0; i < lines.length; i++) { - const trimmed = lines[i].trim(); - if (trimmed.startsWith('@start')) { - lines.splice(i + 1, 0, 'skinparam backgroundColor transparent'); - inserted = true; - break; - } - } - if (!inserted) { - modifiedCode = 'skinparam backgroundColor transparent\n' + modifiedCode; - } else { - modifiedCode = lines.join('\n'); - } - } - const encoded = encodePlantUML(modifiedCode); - const url = 'https://www.plantuml.com/plantuml/svg/' + encoded; - - node.innerHTML = ''; - const img = document.createElement('img'); - img.crossOrigin = 'anonymous'; - img.src = url; - img.alt = 'PlantUML Diagram'; - img.className = 'plantuml-img'; - img.draggable = false; - img.addEventListener('dragstart', e => e.preventDefault()); - img.onload = function() { - if (containerEl) containerEl.classList.remove('is-loading'); - addPlantumlToolbars(); - }; - img.onerror = function() { - node.innerHTML = `
Offline or unable to connect to PlantUML server
`; - if (containerEl) containerEl.classList.remove('is-loading'); - }; - node.appendChild(img); - } catch (err) { - console.error("PlantUML encoding failed:", err); - } - }); - } - } catch (e) { - console.warn("PlantUML failed:", e); - } - - try { - const d2Nodes = queryPreviewRoots(roots, '.d2-diagram'); - if (d2Nodes.length > 0) { - d2Nodes.forEach(node => { - const containerEl = node.closest('.d2-container'); - const originalCode = node.getAttribute('data-original-code'); - if (!originalCode) return; - const decodedCode = decodeURIComponent(originalCode); - try { - let modifiedCode = decodedCode; - if (!modifiedCode.includes('style.fill') && !/style\s*:\s*\{[^}]*fill/.test(modifiedCode)) { - modifiedCode = `style.fill: transparent\n${modifiedCode}`; - } - const encoded = encodeKrokiD2(modifiedCode); - const url = 'https://kroki.io/d2/svg/' + encoded; - - node.innerHTML = ''; - const img = document.createElement('img'); - img.crossOrigin = 'anonymous'; - img.src = url; - img.alt = 'D2 Diagram'; - img.className = 'd2-img'; - img.draggable = false; - img.addEventListener('dragstart', e => e.preventDefault()); - img.onload = function() { - if (containerEl) containerEl.classList.remove('is-loading'); - addD2Toolbars(); - }; - img.onerror = function() { - node.innerHTML = `
Offline or unable to connect to Kroki server
`; - if (containerEl) containerEl.classList.remove('is-loading'); - }; - node.appendChild(img); - } catch (err) { - console.error("D2 encoding failed:", err); - } - }); - } - } catch (e) { - console.warn("D2 failed:", e); - } - try { - const graphvizNodes = queryPreviewRoots(roots, '.graphviz-diagram'); - if (graphvizNodes.length > 0) { - graphvizNodes.forEach(node => { - const containerEl = node.closest('.graphviz-container'); - const originalCode = node.getAttribute('data-original-code'); - if (!originalCode) return; - const decodedCode = decodeURIComponent(originalCode); - try { - const encoded = encodeKrokiGraphviz(decodedCode); - const url = 'https://kroki.io/graphviz/svg/' + encoded; - - node.innerHTML = ''; - const img = document.createElement('img'); - img.crossOrigin = 'anonymous'; - img.src = url; - img.alt = 'Graphviz Diagram'; - img.className = 'graphviz-img'; - img.draggable = false; - img.addEventListener('dragstart', e => e.preventDefault()); - img.onload = function() { - if (containerEl) containerEl.classList.remove('is-loading'); - addGraphvizToolbars(); - }; - img.onerror = function() { - node.innerHTML = `
Offline or unable to connect to Kroki server
`; - if (containerEl) containerEl.classList.remove('is-loading'); - }; - node.appendChild(img); - } catch (err) { - console.error("Graphviz encoding failed:", err); - } - }); - } - } catch (e) { - console.warn("Graphviz failed:", e); - } - } renderSidebar(); renderGrid(); From 399124bae778424f22e64befadb5759cb757c337 Mon Sep 17 00:00:00 2001 From: Baivab Sarkar Date: Tue, 23 Jun 2026 17:44:56 +0530 Subject: [PATCH 04/11] feat: add diverse and visually distinct diagram templates per engine in insert modal --- script.js | 301 ++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 281 insertions(+), 20 deletions(-) diff --git a/script.js b/script.js index 9594f70..5593826 100644 --- a/script.js +++ b/script.js @@ -5590,29 +5590,82 @@ document.addEventListener("DOMContentLoaded", async function () { ]; const svgFlowchart = `StartEnd`; - const svgSequence = `AliceAliceBobBobHelloReply`; + const svgMermaidFlowchartLR = `LeftRight`; + const svgSequence = `AliceAliceBobBobHelloReply`; const svgEr = `CUSTOMERidnameORDERidprice`; const svgClass = `Animal+name: String+age: int+makeSound()`; const svgState = `Active`; const svgGantt = `DesignCode`; const svgPie = ``; - const svgDirected = `ABC`; - const svgBar = ``; - const svgLine = ``; - const svgTiming = `CLK`; - const svgMindmap = `Root`; - const svgAbc = ``; + const svgGitGraph = ``; + const svgJourney = `Stage 1Task A ⭐⭐⭐Stage 2Task B ⭐⭐⭐⭐`; + const svgMermaidMindmap = `Goal`; + + // PlantUML distinct styling (Yellowish actor/notes backgrounds, red outlines, retro styling) + const svgPlantUmlSequence = `UserServer`; + const svgPlantUmlUseCase = `Checkout`; + const svgPlantUmlActivity = `Initialization`; + const svgPlantUmlClass = `CUserClass- id: Long- email: String+ login(): Boolean+ getRoles(): List`; + const svgPlantUmlState = `StateAStateB`; + const svgPlantUmlComponent = `[System Node]Web GUI`; + + // Graphviz (Aesthetic: beige/brown, thin strokes, distinct classic nodes) + const svgGraphvizDigraph = `AB`; + const svgGraphvizTree = `RootLR`; + const svgGraphvizStruct = `node0node1node2`; + const svgGraphvizFsm = `S1S2`; + const svgGraphvizNetwork = `RouterLAN`; + + // D2 (Aesthetic: monospace font, bold slate outlines, soft purple/blue/green boxes) + const svgD2Flow = `xy`; + const svgD2Arch = `Cloud PlatformAppDB`; + const svgD2Sequence = `clientserver`; + const svgD2Erd = `usersid (PK)namepostsid (PK)user_id`; + const svgD2Grid = `Box 1Box 2Main Footer Box`; + + // Vega-Lite (Aesthetic: statistical charts) + const svgVegaBar = ``; + const svgVegaLine = ``; + const svgVegaScatter = ``; + const svgVegaArea = ``; + const svgVegaStackedBar = ``; + + // ABC Notation (Aesthetic: musical notation stave and notes) + const svgAbcMelody = ``; + const svgAbcDuet = ``; + const svgAbcLyric = `DoReMi`; + const svgAbcChords = `CG7`; + + // WaveDrom (Aesthetic: digital waveform timing lines) + const svgWaveTiming = `CLK`; + const svgWaveCounter = `CLK0CLK1`; + const svgWaveBus = `DATABUS`; + const svgWaveReset = `RESETENABLE`; + + // Markmap (Aesthetic: colorful mindmaps, curved connection paths) + const svgMarkmapMindmap = `Root`; + const svgMarkmapRoadmap = `RoadmapQ1 PlanQ2 Build`; + const svgMarkmapStudy = `CourseMathScience`; + const svgMarkmapStack = `StackWebMobile`; const templates = [ // Mermaid { - id: 'mermaid-flowchart', + id: 'mermaid-flowchart-td', category: 'Mermaid', - title: 'Flowchart', - label: 'Flowchart', + title: 'Flowchart (TD)', + label: 'Flowchart (Top-Down)', svg: svgFlowchart, code: '```mermaid\ngraph TD\n Start --> End\n```\n' }, + { + id: 'mermaid-flowchart-lr', + category: 'Mermaid', + title: 'Flowchart (LR)', + label: 'Flowchart (Left-Right)', + svg: svgMermaidFlowchartLR, + code: '```mermaid\ngraph LR\n Left --> Right\n```\n' + }, { id: 'mermaid-sequence', category: 'Mermaid', @@ -5661,6 +5714,30 @@ document.addEventListener("DOMContentLoaded", async function () { svg: svgPie, code: '```mermaid\npie title Pets owned by staff\n "Dogs" : 386\n "Cats" : 85\n```\n' }, + { + id: 'mermaid-git', + category: 'Mermaid', + title: 'Git Graph', + label: 'Git Graph', + svg: svgGitGraph, + code: '```mermaid\ngitGraph\n commit\n branch hotfix\n checkout hotfix\n commit\n checkout main\n merge hotfix\n```\n' + }, + { + id: 'mermaid-journey', + category: 'Mermaid', + title: 'User Journey', + label: 'User Journey', + svg: svgJourney, + code: '```mermaid\njourney\n title My working day\n section Go to work\n Make tea: 5: Me\n Go upstairs: 3: Me\n```\n' + }, + { + id: 'mermaid-mindmap', + category: 'Mermaid', + title: 'Mindmap', + label: 'Mindmap Diagram', + svg: svgMermaidMindmap, + code: '```mermaid\nmindmap\n root((Goal))\n Topic 1\n Subtopic 1\n Topic 2\n```\n' + }, // PlantUML { @@ -5668,7 +5745,7 @@ document.addEventListener("DOMContentLoaded", async function () { category: 'PlantUML', title: 'Sequence Diagram', label: 'Sequence Diagram', - svg: svgSequence, + svg: svgPlantUmlSequence, code: '```plantuml\n@startuml\nAlice -> Bob: Authentication Request\nBob --> Alice: Authentication Response\n@enduml\n' }, { @@ -5676,17 +5753,41 @@ document.addEventListener("DOMContentLoaded", async function () { category: 'PlantUML', title: 'Use Case Diagram', label: 'Use Case Diagram', - svg: svgFlowchart, + svg: svgPlantUmlUseCase, code: '```plantuml\n@startuml\nleft to right direction\nactor Guest\nrectangle Hotel {\n usecase "Book Room" as UC1\n}\nGuest --> UC1\n@enduml\n' }, + { + id: 'plantuml-activity', + category: 'PlantUML', + title: 'Activity Diagram', + label: 'Activity Diagram', + svg: svgPlantUmlActivity, + code: '```plantuml\n@startuml\n:Start;\n:Hello World;\n:End;\n@enduml\n' + }, { id: 'plantuml-class', category: 'PlantUML', title: 'Class Diagram', label: 'Class Diagram', - svg: svgClass, + svg: svgPlantUmlClass, code: '```plantuml\n@startuml\nclass Dummy {\n -field1\n #field2\n ~method1()\n +method2()\n}\n@enduml\n' }, + { + id: 'plantuml-state', + category: 'PlantUML', + title: 'State Diagram', + label: 'State Diagram', + svg: svgPlantUmlState, + code: '```plantuml\n@startuml\n[*] --> State1\nState1 --> State2 : Transition\n@enduml\n' + }, + { + id: 'plantuml-component', + category: 'PlantUML', + title: 'Component Diagram', + label: 'Component Diagram', + svg: svgPlantUmlComponent, + code: '```plantuml\n@startuml\n[Web GUI] --> [App Service] : JSON HTTP\n@enduml\n' + }, // Graphviz { @@ -5694,9 +5795,41 @@ document.addEventListener("DOMContentLoaded", async function () { category: 'Graphviz', title: 'Directed Graph', label: 'Directed Graph', - svg: svgDirected, + svg: svgGraphvizDigraph, code: '```graphviz\ndigraph G {\n Hello -> World\n}\n```\n' }, + { + id: 'graphviz-tree', + category: 'Graphviz', + title: 'Hierarchy Tree', + label: 'Hierarchy Tree', + svg: svgGraphvizTree, + code: '```graphviz\ndigraph Tree {\n node [shape=circle];\n Parent -> Left;\n Parent -> Right;\n}\n```\n' + }, + { + id: 'graphviz-struct', + category: 'Graphviz', + title: 'Record Struct', + label: 'Record Structure', + svg: svgGraphvizStruct, + code: '```graphviz\ndigraph G {\n node [shape=record];\n struct1 [label=" left| mid| right"];\n}\n```\n' + }, + { + id: 'graphviz-fsm', + category: 'Graphviz', + title: 'FSM Diagram', + label: 'Finite State Machine', + svg: svgGraphvizFsm, + code: '```graphviz\ndigraph FSM {\n rankdir=LR;\n S1 -> S2 [label="Input"];\n}\n```\n' + }, + { + id: 'graphviz-network', + category: 'Graphviz', + title: 'Network Topology', + label: 'Network Topology', + svg: svgGraphvizNetwork, + code: '```graphviz\ngraph Net {\n Router -- Switch;\n Switch -- Client1;\n Switch -- Client2;\n}\n```\n' + }, // D2 { @@ -5704,9 +5837,41 @@ document.addEventListener("DOMContentLoaded", async function () { category: 'D2', title: 'Simple Flow', label: 'Simple Flow', - svg: svgFlowchart, + svg: svgD2Flow, code: '```d2\nx -> y: hello world\n```\n' }, + { + id: 'd2-arch', + category: 'D2', + title: 'Architecture Diagram', + label: 'Architecture Diagram', + svg: svgD2Arch, + code: '```d2\ncloud platform {\n app: Application Server\n db: PostgreSQL Database\n app -> db\n}\n```\n' + }, + { + id: 'd2-sequence', + category: 'D2', + title: 'Sequence Diagram', + label: 'Sequence Diagram', + svg: svgD2Sequence, + code: '```d2\nclient -> server: Get User Profile\nserver -> client: Profile Data\n```\n' + }, + { + id: 'd2-erd', + category: 'D2', + title: 'ERD Table', + label: 'Entity Relationship', + svg: svgD2Erd, + code: '```d2\nusers: {\n id: int {constraint: primary_key}\n name: string\n}\nposts: {\n id: int {constraint: primary_key}\n user_id: int\n}\nusers.id -> posts.user_id\n```\n' + }, + { + id: 'd2-grid', + category: 'D2', + title: 'Grid Layout', + label: 'Grid Layout', + svg: svgD2Grid, + code: '```d2\ngrid-demo: {\n style.layout: grid\n Box 1\n Box 2\n}\n```\n' + }, // Vega-Lite { @@ -5714,7 +5879,7 @@ document.addEventListener("DOMContentLoaded", async function () { category: 'Vega-Lite', title: 'Bar Chart', label: 'Bar Chart', - svg: svgBar, + svg: svgVegaBar, code: '```vega-lite\n{\n "$schema": "https://vega.github.io/schema/vega-lite/v5.json",\n "data": {\n "values": [\n {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43}\n ]\n },\n "mark": "bar",\n "encoding": {\n "x": {"field": "a", "type": "nominal"},\n "y": {"field": "b", "type": "quantitative"}\n }\n}\n```\n' }, { @@ -5722,9 +5887,33 @@ document.addEventListener("DOMContentLoaded", async function () { category: 'Vega-Lite', title: 'Line Chart', label: 'Line Chart', - svg: svgLine, + svg: svgVegaLine, code: '```vega-lite\n{\n "$schema": "https://vega.github.io/schema/vega-lite/v5.json",\n "data": {\n "values": [\n {"x": 1, "y": 10}, {"x": 2, "y": 15}, {"x": 3, "y": 13}\n ]\n },\n "mark": "line",\n "encoding": {\n "x": {"field": "x", "type": "quantitative"},\n "y": {"field": "y", "type": "quantitative"}\n }\n}\n```\n' }, + { + id: 'vega-scatter', + category: 'Vega-Lite', + title: 'Scatter Plot', + label: 'Scatter Plot', + svg: svgVegaScatter, + code: '```vega-lite\n{\n "$schema": "https://vega.github.io/schema/vega-lite/v5.json",\n "data": {\n "values": [\n {"x": 1, "y": 1.5}, {"x": 2, "y": 2.5}, {"x": 3, "y": 1.0}\n ]\n },\n "mark": "point",\n "encoding": {\n "x": {"field": "x", "type": "quantitative"},\n "y": {"field": "y", "type": "quantitative"}\n }\n}\n```\n' + }, + { + id: 'vega-area', + category: 'Vega-Lite', + title: 'Area Chart', + label: 'Area Chart', + svg: svgVegaArea, + code: '```vega-lite\n{\n "$schema": "https://vega.github.io/schema/vega-lite/v5.json",\n "data": {\n "values": [\n {"x": 1, "y": 10}, {"x": 2, "y": 15}, {"x": 3, "y": 13}\n ]\n },\n "mark": "area",\n "encoding": {\n "x": {"field": "x", "type": "quantitative"},\n "y": {"field": "y", "type": "quantitative"}\n }\n}\n```\n' + }, + { + id: 'vega-stacked-bar', + category: 'Vega-Lite', + title: 'Stacked Bar', + label: 'Stacked Bar Chart', + svg: svgVegaStackedBar, + code: '```vega-lite\n{\n "$schema": "https://vega.github.io/schema/vega-lite/v5.json",\n "data": {\n "values": [\n {"x": "A", "y": 10, "group": "one"},\n {"x": "A", "y": 15, "group": "two"},\n {"x": "B", "y": 20, "group": "one"},\n {"x": "B", "y": 5, "group": "two"}\n ]\n },\n "mark": "bar",\n "encoding": {\n "x": {"field": "x", "type": "nominal"},\n "y": {"field": "y", "type": "quantitative"},\n "color": {"field": "group", "type": "nominal"}\n }\n}\n```\n' + }, // ABC Notation { @@ -5732,9 +5921,33 @@ document.addEventListener("DOMContentLoaded", async function () { category: 'ABC Notation', title: 'Simple Tune', label: 'Simple Tune', - svg: svgAbc, + svg: svgAbcMelody, code: '```abc\nX: 1\nT: Simple Scale\nM: 4/4\nK: C\nC D E F | G A B c |\n```\n' }, + { + id: 'abc-duet', + category: 'ABC Notation', + title: 'Duet Accord', + label: 'Duet Accord', + svg: svgAbcDuet, + code: '```abc\nX: 2\nT: Simple Duet\nM: 4/4\nK: C\nV:1\nC D E F | G A B c |\nV:2\nE F G A | B c d e |\n```\n' + }, + { + id: 'abc-lyric', + category: 'ABC Notation', + title: 'Folk & Lyrics', + label: 'Lyrics Song', + svg: svgAbcLyric, + code: '```abc\nX: 3\nT: Folk Song\nM: 4/4\nK: C\nC D E C | E G G2 |\nw: Do Re Mi Do | Mi Sol Sol\n```\n' + }, + { + id: 'abc-chords', + category: 'ABC Notation', + title: 'Chords Strum', + label: 'Guitar Chords', + svg: svgAbcChords, + code: '```abc\nX: 4\nT: Chords Strum\nM: 4/4\nK: C\n"C"C D E F | "G"G A B c |\n```\n' + }, // WaveDrom { @@ -5742,9 +5955,33 @@ document.addEventListener("DOMContentLoaded", async function () { category: 'WaveDrom', title: 'Timing Diagram', label: 'Timing Diagram', - svg: svgTiming, + svg: svgWaveTiming, code: '```wavedrom\n{ signal: [\n { name: "clk", wave: "p......" },\n { name: "bus", wave: "x.==.x.", data: ["head", "body"] }\n]}\n```\n' }, + { + id: 'wavedrom-counter', + category: 'WaveDrom', + title: 'Binary Counter', + label: 'Binary Counter', + svg: svgWaveCounter, + code: '```wavedrom\n{ signal: [\n { name: "clk", wave: "p......" },\n { name: "q", wave: "01.01.0" }\n]}\n```\n' + }, + { + id: 'wavedrom-bus', + category: 'WaveDrom', + title: 'Data Bus States', + label: 'Data Bus States', + svg: svgWaveBus, + code: '```wavedrom\n{ signal: [\n { name: "bus", wave: "x.=.=.x", data: ["read", "write"] }\n]}\n```\n' + }, + { + id: 'wavedrom-reset', + category: 'WaveDrom', + title: 'Reset Sequence', + label: 'Reset & Enable', + svg: svgWaveReset, + code: '```wavedrom\n{ signal: [\n { name: "reset", wave: "1.0.1" },\n { name: "enable", wave: "0.1.0" }\n]}\n```\n' + }, // Markmap { @@ -5752,8 +5989,32 @@ document.addEventListener("DOMContentLoaded", async function () { category: 'Markmap', title: 'Mindmap', label: 'Mindmap', - svg: svgMindmap, + svg: svgMarkmapMindmap, code: '```markmap\n# markmap\n## Features\n- Links\n- Formatting\n```\n' + }, + { + id: 'markmap-roadmap', + category: 'Markmap', + title: 'Roadmap', + label: 'Project Roadmap', + svg: svgMarkmapRoadmap, + code: '```markmap\n# Roadmap\n## Q1\n### Plan\n### Design\n## Q2\n### Build\n```\n' + }, + { + id: 'markmap-study', + category: 'Markmap', + title: 'Study Plan', + label: 'Study Topics', + svg: svgMarkmapStudy, + code: '```markmap\n# Course\n## Math\n### Algebra\n### Calculus\n## Science\n### Physics\n```\n' + }, + { + id: 'markmap-stack', + category: 'Markmap', + title: 'Tech Stack', + label: 'Tech Stack', + svg: svgMarkmapStack, + code: '```markmap\n# stack\n## frontend\n### HTML/JS\n## backend\n### Node.js\n```\n' } ]; From 5d512f8367c532f26335b617ab24ac2cef7aa499 Mon Sep 17 00:00:00 2001 From: Baivab Sarkar Date: Tue, 23 Jun 2026 17:54:32 +0530 Subject: [PATCH 05/11] feat: complete all diagram types with distinct previews for all engines --- script.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/script.js b/script.js index 5593826..eeb7eaa 100644 --- a/script.js +++ b/script.js @@ -5600,6 +5600,12 @@ document.addEventListener("DOMContentLoaded", async function () { const svgGitGraph = ``; const svgJourney = `Stage 1Task A ⭐⭐⭐Stage 2Task B ⭐⭐⭐⭐`; const svgMermaidMindmap = `Goal`; + const svgMermaidQuadrant = ``; + const svgMermaidXy = ``; + const svgMermaidRequirement = `«requirement»Req 1«element»Test Case`; + const svgMermaidC4 = `System BoundaryWeb AppContainer: JSAPI AppContainer: Go`; + const svgMermaidSankey = ``; + const svgMermaidTimeline = `20242026`; // PlantUML distinct styling (Yellowish actor/notes backgrounds, red outlines, retro styling) const svgPlantUmlSequence = `UserServer`; @@ -5608,6 +5614,13 @@ document.addEventListener("DOMContentLoaded", async function () { const svgPlantUmlClass = `CUserClass- id: Long- email: String+ login(): Boolean+ getRoles(): List`; const svgPlantUmlState = `StateAStateB`; const svgPlantUmlComponent = `[System Node]Web GUI`; + const svgPlantUmlObject = `myUser : Username = "Alice"role = "Admin"`; + const svgPlantUmlDeployment = `Node`; + const svgPlantUmlTiming = `WebState`; + const svgPlantUmlNetwork = `ServerDatabase192.168.1.0`; + const svgPlantUmlMindmap = `Idea`; + const svgPlantUmlWbs = `Project`; + const svgPlantUmlJson = `"name": "Widget""count": 42"active": true`; // Graphviz (Aesthetic: beige/brown, thin strokes, distinct classic nodes) const svgGraphvizDigraph = `AB`; @@ -5615,6 +5628,8 @@ document.addEventListener("DOMContentLoaded", async function () { const svgGraphvizStruct = `node0node1node2`; const svgGraphvizFsm = `S1S2`; const svgGraphvizNetwork = `RouterLAN`; + const svgGraphvizSubgraph = `cluster_0`; + const svgGraphvizEr = `EntityRel`; // D2 (Aesthetic: monospace font, bold slate outlines, soft purple/blue/green boxes) const svgD2Flow = `xy`; From e91e5e7001faaa140e9933f434053bcfcaea3b7c Mon Sep 17 00:00:00 2001 From: Baivab Sarkar Date: Tue, 23 Jun 2026 18:04:55 +0530 Subject: [PATCH 06/11] feat: complete all diagram templates, sync desktop app, and bump sw cache --- desktop-app/resources/index.html | 51 + desktop-app/resources/js/preview-worker.js | 7 + desktop-app/resources/js/script.js | 1269 +++++++++++++++++++- desktop-app/resources/styles.css | 354 +++++- script.js | 238 ++++ sw.js | 2 +- 6 files changed, 1874 insertions(+), 47 deletions(-) diff --git a/desktop-app/resources/index.html b/desktop-app/resources/index.html index 4f4ad69..518f6e2 100644 --- a/desktop-app/resources/index.html +++ b/desktop-app/resources/index.html @@ -317,6 +317,7 @@

Menu

+
@@ -774,6 +775,56 @@

Open-source credits

+ + +