chore(visimer/site): tighten hero copy + surface Open Knowledge (#2852)

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

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 />

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>