diff --git a/README.md b/README.md
index 5ab104a..30742b2 100644
--- a/README.md
+++ b/README.md
@@ -51,6 +51,10 @@ Try everything locally:
 pnpm install && pnpm dev   # playground at http://localhost:5173
 ```
 
+## Try with Open Knowledge
+
+Every `.mmd` and Markdown editor in [Open Knowledge](https://openknowledge.ai) ships visimer as its diagram surface. Open a project and you get the same click-a-node-to-edit canvas over your own docs, wired up with realtime collaboration, git-backed history, and shareable links. The fastest way to try visimer on real diagrams is [openknowledge.ai](https://openknowledge.ai).
+
 ## What you can do
 
 - **Edit text in place**: double-click any label and type right on the diagram; nodes grow as you type
diff --git a/apps/site/index.html b/apps/site/index.html
index c53943e..5ac3426 100644
--- a/apps/site/index.html
+++ b/apps/site/index.html
@@ -6,10 +6,10 @@
     <meta name="theme-color" content="#0E7C6B" />
     <meta name="color-scheme" content="light" />
 
-    <title>Visimer · Edit Mermaid diagrams by hand</title>
+    <title>Visimer · Edit Mermaid diagrams visually</title>
     <meta
       name="description"
-      content="Visimer is an open-source WYSIWYG editor for Mermaid diagrams. Click a node to rename or reshape it and the source rewrites itself. React and vanilla bindings, MIT licensed."
+      content="Visimer is an open-source WYSIWYG editor for Mermaid diagrams. Click a node to rename or reshape it. Perfect for polishing AI-generated diagrams."
     />
     <meta
       name="keywords"
@@ -24,27 +24,27 @@
     <link rel="apple-touch-icon" href="/favicon.svg" />
 
     <meta property="og:site_name" content="Visimer" />
-    <meta property="og:title" content="Visimer · Edit Mermaid diagrams by hand" />
+    <meta property="og:title" content="Visimer · Edit Mermaid diagrams visually" />
     <meta
       property="og:description"
-      content="An open-source WYSIWYG editor for Mermaid. Click a node to rename or reshape it and the source rewrites itself."
+      content="An open-source WYSIWYG editor for Mermaid diagrams. Click a node to rename or reshape it."
     />
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://visimer.com/" />
     <meta property="og:image" content="https://visimer.com/og-image.png" />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
-    <meta property="og:image:alt" content="Visimer: edit Mermaid diagrams by hand." />
+    <meta property="og:image:alt" content="Visimer: edit Mermaid diagrams visually." />
     <meta property="og:locale" content="en_US" />
 
     <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="Visimer · Edit Mermaid diagrams by hand" />
+    <meta name="twitter:title" content="Visimer · Edit Mermaid diagrams visually" />
     <meta
       name="twitter:description"
-      content="An open-source WYSIWYG editor for Mermaid. Click a node to rename or reshape it and the source rewrites itself."
+      content="An open-source WYSIWYG editor for Mermaid diagrams. Click a node to rename or reshape it."
     />
     <meta name="twitter:image" content="https://visimer.com/og-image.png" />
-    <meta name="twitter:image:alt" content="Visimer: edit Mermaid diagrams by hand." />
+    <meta name="twitter:image:alt" content="Visimer: edit Mermaid diagrams visually." />
 
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
diff --git a/apps/site/public/og-image.png b/apps/site/public/og-image.png
index 244d13a..9f6d793 100644
Binary files a/apps/site/public/og-image.png and b/apps/site/public/og-image.png differ
diff --git a/apps/site/public/og-image.svg b/apps/site/public/og-image.svg
new file mode 100644
index 0000000..e8c5692
--- /dev/null
+++ b/apps/site/public/og-image.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" width="1200" height="630">
+  <rect width="1200" height="630" fill="#F7F4ED"/>
+  <g transform="translate(80, 80)">
+    <g transform="scale(3.2)">
+      <rect x="1" y="8.5" width="9" height="9" rx="2.4" fill="#0E7C6B"/>
+      <rect x="16" y="1" width="9" height="9" rx="2.4" fill="#1C1A17"/>
+      <rect x="16" y="16" width="9" height="9" rx="2.4" fill="#C9A227"/>
+      <path d="M10 12.2 H14 Q15 12.2 15 11.2 V6.8 Q15 5.8 16 5.8" stroke="#1C1A17" stroke-width="1.6" fill="none" stroke-linecap="round"/>
+      <path d="M10 13.8 H14 Q15 13.8 15 14.8 V19.2 Q15 20.2 16 20.2" stroke="#C9A227" stroke-width="1.6" fill="none" stroke-linecap="round"/>
+    </g>
+    <text x="120" y="63" font-family="Inter, system-ui, sans-serif" font-weight="700" font-size="48" letter-spacing="-1.5" fill="#1C1A17">Visimer</text>
+  </g>
+  <text x="80" y="330" font-family="Inter, system-ui, sans-serif" font-weight="700" font-size="88" letter-spacing="-3" fill="#1C1A17">Edit Mermaid diagrams</text>
+  <text x="80" y="428" font-family="Inter, system-ui, sans-serif" font-weight="700" font-size="88" letter-spacing="-3" fill="#0E7C6B">visually.</text>
+  <text x="80" y="510" font-family="Inter, system-ui, sans-serif" font-weight="400" font-size="30" fill="#544F47">Click a node to rename or reshape it. Perfect for polishing AI-generated diagrams.</text>
+  <g transform="translate(80, 550)">
+    <rect x="0" y="0" width="13" height="13" rx="99" fill="#0E7C6B"/>
+    <text x="25" y="12" font-family="Inter, system-ui, sans-serif" font-weight="500" font-size="22" fill="#6B6559">Open source · MIT · React &amp; vanilla</text>
+  </g>
+</svg>
diff --git a/apps/site/src/App.tsx b/apps/site/src/App.tsx
index f068ebd..9c02205 100644
--- a/apps/site/src/App.tsx
+++ b/apps/site/src/App.tsx
@@ -529,7 +529,7 @@ export default function App() {
               textWrap: 'balance',
             }}
           >
-            Edit Mermaid diagrams <em style={{ fontStyle: 'normal', color: '#0E7C6B' }}>by hand.</em>
+            Edit Mermaid diagrams <em style={{ fontStyle: 'normal', color: '#0E7C6B' }}>visually.</em>
           </h1>
           <p
             style={{
@@ -541,8 +541,8 @@ export default function App() {
               textWrap: 'pretty',
             }}
           >
-            A WYSIWYG editor for Mermaid. Click a node to rename or reshape it. The source rewrites itself. Perfect
-            for fixing up AI-generated diagrams the visual way.
+            A WYSIWYG editor for Mermaid diagrams. Click a node to rename or reshape it. Perfect for polishing
+            AI-generated diagrams.
           </p>
           <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap', marginTop: 30 }}>
             <a
@@ -574,7 +574,9 @@ export default function App() {
               Open the playground
             </a>
             <a
-              href="#install"
+              href="https://openknowledge.ai"
+              target="_blank"
+              rel="noreferrer"
               style={{
                 background: '#FCFAF5',
                 border: '1px solid #E6E0D4',
@@ -584,6 +586,20 @@ export default function App() {
                 fontWeight: 600,
                 fontSize: 15,
               }}
+            >
+              Try with Open Knowledge ↗
+            </a>
+            <a
+              href="#install"
+              style={{
+                background: 'transparent',
+                border: '1px solid transparent',
+                color: '#544F47',
+                padding: '13px 12px',
+                borderRadius: 11,
+                fontWeight: 600,
+                fontSize: 15,
+              }}
             >
               Install
             </a>