streamdown-beautiful-mermaid 1.0.0

package/README.md

@@ -0,0 +1,53 @@
+# streamdown-beautiful-mermaid
+
+A beautiful Mermaid diagram rendering plugin for [Streamdown](https://github.com/wan-kong/streamdown), powered by [beautiful-mermaid](https://github.com/shikijs/beautiful-mermaid).
+
+## Installation
+
+```bash
+npm install streamdown-beautiful-mermaid
+```
+
+## Usage
+
+### Basic Usage in Streamdown
+
+```typescript
+- import { mermaid } from "@streamdown/markdown";
++ import { mermaid } from 'streamdown-beautiful-mermaid';
+
+```
+
+## Theme Variables
+
+Configure visual appearance through `themeVariables`:
+
+```typescript
+{
+  themeVariables: {
+    // Colors
+    primaryColor: '#ffffff',           // Background color
+    primaryTextColor: '#27272A',       // Foreground/text color
+    lineColor: '#666666',              // Edge/connector color
+    primaryBorderColor: '#cccccc',     // Border color
+    secondaryColor: '#f0f0f0',         // Surface/fill tint
+    tertiaryColor: '#0066cc',          // Accent color
+    tertiaryTextColor: '#666666',      // Secondary text color
+
+    // Typography
+    fontFamily: 'Inter, sans-serif',
+
+    // Spacing (in pixels)
+    padding: 40,
+    nodeSpacing: 24,
+    layerSpacing: 40,
+
+    // Rendering
+    transparent: false
+  }
+}
+```
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1 @@
+'use strict';var beautifulMermaid=require('beautiful-mermaid');var a={};function m(i){let e={};if(!i.themeVariables)return e;let r=i.themeVariables;return r.primaryColor&&(e.bg=r.primaryColor),r.primaryTextColor&&(e.fg=r.primaryTextColor),r.lineColor&&(e.line=r.lineColor),r.primaryBorderColor&&(e.border=r.primaryBorderColor),r.secondaryColor&&(e.surface=r.secondaryColor),r.tertiaryColor&&(e.accent=r.tertiaryColor),r.tertiaryTextColor&&(e.muted=r.tertiaryTextColor),r.fontFamily&&(e.font=r.fontFamily),r.padding!==void 0&&(e.padding=Number(r.padding)),r.nodeSpacing!==void 0&&(e.nodeSpacing=Number(r.nodeSpacing)),r.layerSpacing!==void 0&&(e.layerSpacing=Number(r.layerSpacing)),r.transparent!==void 0&&(e.transparent=!!r.transparent),e}function g(i={}){let e={...a,...i.config},r={initialize(n){e={...a,...i.config,...n};},async render(n,o){let t=m(e);return {svg:await beautifulMermaid.renderMermaid(o,t)}}};return {name:"mermaid",type:"diagram",language:"mermaid",getMermaid(n){return n&&r.initialize(n),r}}}var l=g();exports.createMermaidPlugin=g;exports.mergeConfig=m;exports.mermaid=l;

package/dist/index.d.cts

@@ -0,0 +1,51 @@
+import { RenderOptions } from 'beautiful-mermaid';
+import { MermaidConfig } from 'mermaid';
+
+/**
+ * Mermaid instance interface
+ */
+interface MermaidInstance {
+    initialize: (config: MermaidConfig) => void;
+    render: (id: string, source: string) => Promise<{
+        svg: string;
+    }>;
+}
+/**
+ * Plugin for diagram rendering (Mermaid)
+ */
+interface DiagramPlugin {
+    name: "mermaid";
+    type: "diagram";
+    /**
+     * Language identifier for code blocks
+     */
+    language: string;
+    /**
+     * Get the mermaid instance (initialized with optional config)
+     */
+    getMermaid: (config?: MermaidConfig) => MermaidInstance;
+}
+/**
+ * Options for creating a Mermaid plugin
+ */
+interface MermaidPluginOptions {
+    /**
+     * Default beautiful-mermaid configuration
+     */
+    config?: MermaidConfig;
+}
+/**
+ * Convert MermaidConfig.themeVariables to RenderOptions
+ * Maps Mermaid theme variables to beautiful-mermaid color and layout settings
+ */
+declare function mergeConfig(config: MermaidConfig): RenderOptions;
+/**
+ * Create a Mermaid plugin with optional configuration
+ */
+declare function createMermaidPlugin(options?: MermaidPluginOptions): DiagramPlugin;
+/**
+ * Pre-configured Mermaid plugin with default settings
+ */
+declare const mermaid: DiagramPlugin;
+
+export { type DiagramPlugin, type MermaidInstance, type MermaidPluginOptions, createMermaidPlugin, mergeConfig, mermaid };

package/dist/index.d.ts

@@ -0,0 +1,51 @@
+import { RenderOptions } from 'beautiful-mermaid';
+import { MermaidConfig } from 'mermaid';
+
+/**
+ * Mermaid instance interface
+ */
+interface MermaidInstance {
+    initialize: (config: MermaidConfig) => void;
+    render: (id: string, source: string) => Promise<{
+        svg: string;
+    }>;
+}
+/**
+ * Plugin for diagram rendering (Mermaid)
+ */
+interface DiagramPlugin {
+    name: "mermaid";
+    type: "diagram";
+    /**
+     * Language identifier for code blocks
+     */
+    language: string;
+    /**
+     * Get the mermaid instance (initialized with optional config)
+     */
+    getMermaid: (config?: MermaidConfig) => MermaidInstance;
+}
+/**
+ * Options for creating a Mermaid plugin
+ */
+interface MermaidPluginOptions {
+    /**
+     * Default beautiful-mermaid configuration
+     */
+    config?: MermaidConfig;
+}
+/**
+ * Convert MermaidConfig.themeVariables to RenderOptions
+ * Maps Mermaid theme variables to beautiful-mermaid color and layout settings
+ */
+declare function mergeConfig(config: MermaidConfig): RenderOptions;
+/**
+ * Create a Mermaid plugin with optional configuration
+ */
+declare function createMermaidPlugin(options?: MermaidPluginOptions): DiagramPlugin;
+/**
+ * Pre-configured Mermaid plugin with default settings
+ */
+declare const mermaid: DiagramPlugin;
+
+export { type DiagramPlugin, type MermaidInstance, type MermaidPluginOptions, createMermaidPlugin, mergeConfig, mermaid };

package/dist/index.js

@@ -0,0 +1 @@
+import {renderMermaid}from'beautiful-mermaid';var a={};function m(i){let e={};if(!i.themeVariables)return e;let r=i.themeVariables;return r.primaryColor&&(e.bg=r.primaryColor),r.primaryTextColor&&(e.fg=r.primaryTextColor),r.lineColor&&(e.line=r.lineColor),r.primaryBorderColor&&(e.border=r.primaryBorderColor),r.secondaryColor&&(e.surface=r.secondaryColor),r.tertiaryColor&&(e.accent=r.tertiaryColor),r.tertiaryTextColor&&(e.muted=r.tertiaryTextColor),r.fontFamily&&(e.font=r.fontFamily),r.padding!==void 0&&(e.padding=Number(r.padding)),r.nodeSpacing!==void 0&&(e.nodeSpacing=Number(r.nodeSpacing)),r.layerSpacing!==void 0&&(e.layerSpacing=Number(r.layerSpacing)),r.transparent!==void 0&&(e.transparent=!!r.transparent),e}function g(i={}){let e={...a,...i.config},r={initialize(n){e={...a,...i.config,...n};},async render(n,o){let t=m(e);return {svg:await renderMermaid(o,t)}}};return {name:"mermaid",type:"diagram",language:"mermaid",getMermaid(n){return n&&r.initialize(n),r}}}var l=g();export{g as createMermaidPlugin,m as mergeConfig,l as mermaid};

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "streamdown-beautiful-mermaid",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "test:coverage": "vitest --coverage run"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "beautiful-mermaid": "^0.1.3"
+  },
+  "devDependencies": {
+    "mermaid": "^11.12.2",
+    "@vitest/coverage-v8": "^4.0.15",
+    "jsdom": "^27.3.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.15"
+  },
+  "author": "wankong <1549072621@qq.com>",
+  "license": "MIT",
+  "description": "beautiful-mermaid plugin for Streamdown",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wan-kong/streamdown-beautiful-mermaid.git"
+  }
+}