fix: Track mermaid.ai outflow

src/lib/components/DesktopEditor.svelte

@@ -2,6 +2,7 @@
   import type { EditorProps } from '$/types';
   import { env } from '$/util/env';
   import { stateStore, urlsStore } from '$/util/state';
+  import { logMermaidChartClick } from '$/util/stats';
   import { AIPromptViewZoneManager } from '$lib/util/AIPromptViewZoneManager';
   import { initEditor } from '$lib/util/monacoExtra';
   import { errorDebug } from '$lib/util/util';
@@ -222,6 +223,7 @@
       onHeightChange={(height) => aiPromptManager.updateHeight(height)}
       onClose={closePopup}
       onTryFree={() => {
+        logMermaidChartClick('vibeDiagramming');
         window.open($urlsStore.mermaidChart({ medium: 'vibe_diagramming' }).save, '_blank');
         closePopup();
       }} />

src/lib/components/Editor.svelte

@@ -7,6 +7,7 @@
   import { TID } from '$/constants';
   import { env } from '$/util/env';
   import { stateStore, updateCode, updateConfig, urlsStore } from '$lib/util/state';
+  import { logMermaidChartClick } from '$lib/util/stats';
   import { debounce } from 'lodash-es';
   import ExclamationCircleIcon from '~icons/material-symbols/error-outline-rounded';
 
@@ -65,7 +66,9 @@
               variant="accent"
               size="sm"
               data-testid={TID.aiRepairButton}
-              href={$urlsStore.mermaidChart({ medium: 'ai_repair' }).save}>
+              href={$urlsStore.mermaidChart({ medium: 'ai_repair' }).save}
+              target="_blank"
+              onclick={() => logMermaidChartClick('aiRepair')}>
               <MermaidChartIcon />
               AI Repair
             </Button>

src/lib/components/MainMenu.svelte

@@ -4,6 +4,7 @@
   import { Switch } from '$/components/ui/switch';
   import { env } from '$/util/env';
   import { urlsStore } from '$/util/state';
+  import { logMermaidChartClick } from '$/util/stats';
   import { cn } from '$/utils';
   import { mode, setMode } from 'mode-watcher';
   import type { Component, Snippet } from 'svelte';
@@ -23,6 +24,7 @@
     icon: Component;
     href: string;
     class?: string;
+    onclick?: () => void;
     sharesData?: boolean;
     checkDiagramType?: boolean;
     isSectionEnd?: boolean;
@@ -37,6 +39,7 @@
       icon: PlaygroundIcon,
       isSectionEnd: true,
       label: 'Edit in Playground',
+      onclick: () => logMermaidChartClick('editInPlayground'),
       renderer: mcMenuItem
     },
     {
@@ -62,6 +65,7 @@
       href: $urlsStore.mermaidChart({ medium: 'main_menu' }).plugins,
       icon: PluginIcon,
       label: 'Plugins',
+      onclick: () => logMermaidChartClick('plugins'),
       renderer: mcMenuItem,
       sharesData: false
     },
@@ -78,6 +82,7 @@
       href: $urlsStore.mermaidChart({ medium: 'main_menu' }).home,
       icon: MermaidChartIcon,
       label: 'Mermaid',
+      onclick: () => logMermaidChartClick('mermaidHome'),
       renderer: mcMenuItem,
       sharesData: false
     }
@@ -88,6 +93,7 @@
   <a
     href={options.href}
     target="_blank"
+    onclick={options.onclick}
     class={cn(
       'flex items-center justify-start gap-2 border-b-2 p-2 px-3 hover:bg-muted',
       options.isSectionEnd && 'border-border-dark',

src/lib/components/Navbar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import { logEvent, plausible } from '$lib/util/stats';
+  import { logEvent, logMermaidChartClick } from '$lib/util/stats';
   import { version } from 'mermaid/package.json';
 
   void logEvent('version', {
@@ -43,12 +43,13 @@
   let activePromotion = $state(hidePromotion ? undefined : getActivePromotion());
 
   const trackBannerClick = () => {
-    if (!plausible || !activePromotion) {
+    if (!activePromotion) {
       return;
     }
     logEvent('bannerClick', {
       promotion: activePromotion.id
     });
+    logMermaidChartClick('banner');
   };
 </script>
 

src/lib/components/migration/EditorChooserModal.svelte

@@ -2,7 +2,7 @@
   import { Button } from '$/components/ui/button';
   import * as Dialog from '$/components/ui/dialog';
   import { dismissEditorChooser, isOnMermaidAI } from '$/util/migration/domainMigration';
-  import { logEvent } from '$/util/stats';
+  import { logEvent, logMermaidChartClick } from '$/util/stats';
   import CodeIcon from '~icons/custom/code';
   import OpenSourceIcon from '~icons/material-symbols/book-2-outline-rounded';
   import ChatIcon from '~icons/material-symbols/chat-outline-rounded';
@@ -25,7 +25,8 @@
   };
 
   const handleStartTrial = () => {
-    logEvent('editorChooserPlus');
+    logEvent('chooseEditor', { choice: 'plus' });
+    logMermaidChartClick('editorPicker');
     close();
     const utmSource = isOnMermaidAI() ? 'mermaid_ai_live' : 'mermaid_live_editor';
     window.open(
@@ -41,7 +42,7 @@
   };
 
   const handleStartFree = () => {
-    logEvent('editorChooserOpenSource');
+    logEvent('chooseEditor', { choice: 'openSource' });
     close();
   };
 </script>

src/lib/util/stats.ts

@@ -81,14 +81,14 @@ const noDelay = 0;
 const defaultDelay = minutesToMilliSeconds(1);
 const delaysPerEvent = {
   bannerClick: noDelay,
+  chooseEditor: noDelay,
   copyClipboard: defaultDelay,
   copyMarkdown: defaultDelay,
   download: defaultDelay,
-  editorChooserOpenSource: noDelay,
-  editorChooserPlus: noDelay,
   history: defaultDelay,
   loadGist: defaultDelay,
   loadSampleDiagram: defaultDelay,
+  mermaidChartClick: noDelay,
   migration: defaultDelay,
   mobileViewToggle: defaultDelay,
   panZoom: minutesToMilliSeconds(10),
@@ -123,3 +123,7 @@ export const logEvent = (
     window.setTimeout(() => timeouts.delete(key), delaysPerEvent[name])
   );
 };
+
+export const logMermaidChartClick = (source: string): void => {
+  logEvent('mermaidChartClick', { source });
+};

src/routes/edit/+page.svelte

@@ -22,7 +22,7 @@
   import { shouldShowEditorChooser } from '$/util/migration/domainMigration';
   import { PanZoomState } from '$/util/panZoom';
   import { stateStore, updateCodeStore, urlsStore } from '$/util/state';
-  import { logEvent } from '$/util/stats';
+  import { logEvent, logMermaidChartClick } from '$/util/stats';
   import { initHandler } from '$/util/util';
   import { onMount } from 'svelte';
   import CodeIcon from '~icons/custom/code';
@@ -95,7 +95,8 @@
         variant="accent"
         size="sm"
         href={$urlsStore.mermaidChart({ medium: 'save_diagram' }).save}
-        target="_blank">
+        target="_blank"
+        onclick={() => logMermaidChartClick('saveDiagram')}>
         <MermaidChartIcon />
         Save diagram
       </Button>