Chainlit中Mermaid代码无法渲染为图表的问题解决求助

1. 使用Chainlit官方Mermaid组件（推荐） #

Chainlit内置了专门的Mermaid组件，可直接用来渲染Mermaid图表，无需依赖代码块标记解析。

实现步骤： #

• 确保Chainlit版本≥0.7.0（旧版本无此组件），执行升级：

  pip install --upgrade chainlit
  

• 在消息处理逻辑中，拦截模型返回内容，提取Mermaid代码并通过组件发送：

  import chainlit as cl
  from chainlit.components import Mermaid
  
  @cl.on_message
  async def handle_message(message: cl.Message):
      # 调用你的模型获取响应
      model_output = await your_model_inference(message.content)
  
      # 识别并提取Mermaid代码块
      if "```mermaid" in model_output:
          mermaid_content = model_output.split("```mermaid")[1].split("```")[0].strip()
          # 发送Mermaid图表组件
          await cl.Message(
              content="",
              components=[Mermaid(code=mermaid_content)]
          ).send()
      else:
          # 发送普通文本响应
          await cl.Message(content=model_output).send()
  

2. 自定义Mermaid渲染组件（备用方案） #

如果官方组件无法满足需求，可自定义组件注入Mermaid渲染脚本：

import chainlit as cl

class CustomMermaidRenderer(cl.Component):
    def __init__(self, mermaid_code: str):
        super().__init__()
        self.code = mermaid_code

    def _render(self):
        return f"""
        <div class="mermaid">{self.code}</div>
        <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
        <script>mermaid.initialize({{startOnLoad: true}});</script>
        """

# 使用示例
await cl.Message(
    content="以下是生成的流程图：",
    components=[CustomMermaidRenderer(mermaid_code="graph TD; A-->B; B-->C;")]
).send()

注意：自定义方案依赖外部CDN脚本，需确保Chainlit的内容安全策略允许加载外部资源。

3. 排查常见问题 #

• 无需开启config.toml中的LaTeX功能，该设置与Mermaid渲染无关；
• 确保模型返回的Mermaid代码格式正确，无语法错误；
• 检查Chainlit控制台是否有报错信息，排查组件加载失败原因。

内容的提问来源于stack exchange，提问作者Ammar_Fahmy