@ friendofsvelte/ 美容师

Svelte 5具有强大的,型号安全的美人鱼.js组件,具有SSS支持,自定义主题,以及响应性设计.

特征

• ⚡ 闪电快 - 动态进口和优化渲染
• 🎨 完全自定义 - 完成主题控制和配置
• 📱 反应准备 - 内在反应行为
• 🔒 类型安全 - 严格打字的完整类型脚本支持
• 🧪 测试友好 - 用Playwright测试的E2E
• 🚀 SSR 兼容性 - 与SvelteKit SSR和静电发电公司合作

安装

npm install @friendofsvelte/mermaid

快速启动

<script>
  import { Mermaid } from '@friendofsvelte/mermaid';
  
  const diagram = `graph TD
    A[Start] --> B[Process]
    B --> C[End]`;
</script>

<Mermaid string={diagram} />

高级使用

<script>
  import { Mermaid } from '@friendofsvelte/mermaid';
  import type { MermaidConfig } from '@friendofsvelte/mermaid';
  
  const config: MermaidConfig = {
    theme: 'dark',
    flowchart: {
      useMaxWidth: true,
      htmlLabels: true
    }
  };
  
  const diagram = `sequenceDiagram
    participant A as Alice
    participant B as Bob
    A->>B: Hello Bob!
    B-->>A: Hello Alice!`;
</script>

<Mermaid string={diagram} {config} />

API 参考

道具

类型

interface MermaidConfig {
  theme?: 'default' | 'dark' | 'forest' | 'neutral' | 'base';
  flowchart?: {
    useMaxWidth?: boolean;
    htmlLabels?: boolean;
    curve?: string;
  };
  sequence?: {
    useMaxWidth?: boolean;
    actorMargin?: number;
  };
  // ... and more
}

interface MermaidError {
  message: string;
  stack?: string;
}

支持的图表类型

• 流程图 - 流程和决策树
• 序列图 - API互动和工作流程
• 甘特图 - 项目时间表和时间安排
• 用户行进图 - UX流动和客户经验
• 实体关系图 - 数据库计划
• 图形 - 版本控制工作流程
• 派图 - 数据可视化
• 类图 - 面向对象的设计

实例

自定义 主题

<script>
  import { Mermaid } from '@friendofsvelte/mermaid';
  
  const customConfig = {
    theme: 'dark',
    flowchart: {
      useMaxWidth: true,
      htmlLabels: true,
      curve: 'basis'
    }
  };
</script>

<Mermaid string={diagram} config={customConfig} />

处理错误

<script>
  import { Mermaid } from '@friendofsvelte/mermaid';
  
  const invalidDiagram = `invalid syntax here`;
</script>

<Mermaid string={invalidDiagram}>
  {#snippet error(errorObj)}
    <div class="error-message">
      <p>Failed to render diagram: {errorObj.message}</p>
    </div>
  {/snippet}
</Mermaid>

发展

# Clone the repository
git clone https://github.com/friendofsvelte/mermaid.git
cd mermaid

# Install dependencies
npm install

# Start development server
npm run dev

# Run tests
npm run test

# Build library
npm run build

捐款

欢迎捐款! 请随意提交拉力请求.

1. 叉子存储器
2. 创建您的特性分支( E)git checkout -b feature/amazing-feature(中文(简体) )
3. 提交更改( E)git commit -m 'Add some amazing feature'(中文(简体) )
4. 推向分行(git push origin feature/amazing-feature(中文(简体) )
5. 打开拉请求

许可证

麻省理工学院 斯维尔特的朋友

链接

• 文档
• 实例
• 问题
• 美人鱼.js 文档
• 丝绒

由QQ为斯维尔特社区而建.