[Bug] Mermaid diagrams fail to auto-scale and render incorrectly in Markdown preview

[codevampire]

Description

Opening a Markdown file containing Mermaid diagram code blocks (```mermaid) results in incorrect rendering:

1. The rendered diagram does not auto-fit / scale to the preview panel size (overflows or is clipped).
2. The Mermaid diagram itself renders incorrectly (e.g., wrong layout, missing elements, or unexpected visual result), despite the same Mermaid source rendering correctly on mermaid.live.

Environment

• OS: debian 12 amd64
• Ferrite version: 0.3.0
• Rust version: rustc 1.96.0
• Installation method: pre-built binary via flatpak

Steps to Reproduce

1. Open Ferrite editor
2. Open a Markdown file containing a Mermaid code block, e.g.:

   ```mermaid
   graph TD
     A[Start] --> B[Process]
     B --> C[End]
   ```

3. Switch to / trigger the Markdown preview with Mermaid rendering
4. Observe that:
   • Diagram does not scale to fit the preview width
   • Rendered output looks incorrect or unexpected

Expected Behavior

• Mermaid diagram should automatically scale / resize to fit the preview container
• Diagram should render the same logical structure and layout as on official Mermaid live editor (mermaid.js latest)

graph TD
    %% 客户端层
    subgraph 业务客户端 PEP
        A1[堡垒机运维系统]
        A2[SDP零信任访问]
        A3[AI Agent命令代理]
        A4[微服务API网关]
        A5[内部业务系统]
    end

    %% 接入层
    subgraph 统一接入层
        B1[REST API 统一决策端点兼容标准OPA协议]
        B2[gRPC 高性能决策端点内网低延迟调用]
        B3[管理接口策略CRUD/版本/热更新]
    end

    %% 核心安全决策层
    subgraph 安全决策核心层
        C1[OAuth2/OIDC 认证模块身份校验/令牌解析/身份标准化]
        C2[Rust-Regorus OPA引擎多租户隔离/策略校验/统一决策]
        C3[多模型适配中枢RBAC/ABAC/PBAC/混合模型]
    end

    %% 支撑能力层
    subgraph 核心支撑层
        D1[策略全生命周期管理发布/热更新/灰度/回滚]
        D2[多级缓存管理策略预编译/热点数据缓存]
        D3[安全校验模块语法校验/归属校验/非法策略拦截]
        D4[审计日志模块全链路决策记录/变更追溯]
        D5[监控与健康检查指标采集/异常告警]
    end

    %% 数据与中间件层
    subgraph 数据持久与中间件层
        E1[数据库策略/租户/应用元数据持久化]
        E2[Redis缓存热点策略/权限数据加速]
        E3[消息队列异步审计/集群策略同步]
        E4[监控日志系统Prometheus+Grafana+ELK]
    end

    %% 数据流连线
    A1 & A2 & A3 & A4 & A5 --> B1 & B2
    B1 & B2 --> C1
    C1 --> C2
    C2 --> C3
    C2 & C3 <--> D1 & D2 & D3 & D4 & D5
    D1 & D2 & D4 & D5 <--> E1 & E2 & E3 & E4

Loading

sequenceDiagram
    autonumber
    participant PEP as 业务PEP客户端(网关/堡垒机/AI Agent)
    participant AUTH as 认证服务模块
    participant CACHE as 本地缓存/Redis缓存
    participant PDP as OPA授权决策模块

    PEP->>AUTH: 携带Authorization Bearer Token发起鉴权请求
    AUTH->>AUTH: 校验请求头格式、参数合法性
    AUTH->>CACHE: 查询令牌黑名单/缓存会话信息
    CACHE-->>AUTH: 返回缓存校验结果
    AUTH->>AUTH: JWT签名校验、过期时间校验、签发方校验
    AUTH->>AUTH: 解析标准化身份属性(租户/应用/用户/角色/属性)
    AUTH->>AUTH: 校验租户、应用归属合法性
    alt 认证失败
        AUTH-->>PEP: 返回认证失败(错误码+原因)，终止流程
    else 认证成功
        AUTH-->>PDP: 推送标准化可信身份结构体
        PDP->>PDP: 进入策略授权决策流程
    end

Loading

Actual Behavior

Screenshots

If applicable, add screenshots showing:

• The broken / oversized Mermaid render in Ferrite
• Correct render from https://mermaid.live/ for comparison

Log Output

Additional Context

• Mermaid syntax used is confirmed valid on mermaid.live
• Issue occurs with multiple diagram types (graph / sequenceDiagram / flowchart, etc.)

[OlaProeis]

@codevampire

Thanks for the detailed report and the side-by-side expectation vs. mermaid.live.

Some background that explains both points: Ferrite renders Mermaid with a
native engine (no mermaid.js / no embedded browser), so we approximate
mermaid's layout rather than matching it pixel-for-pixel. With that in mind:

1. Auto-fit to the preview width.
On 0.3.0 the preview draws the diagram at its natural size inside a horizontal
scroll area, so wide diagrams scroll/overflow rather than scale to the pane —
that's what you're hitting. The next release (0.3.1) adds a
diagram popup viewer with proper fit/zoom/pan and a reset-to-fit, which will
give you a usable way to view large diagrams. Inline "scale to fit the pane" in
the preview itself is a separate gap we don't have yet — I'll use this issue as
the tracking item for it.

2. The diagram rendering itself.
Your specific diagrams exercise a few things we can pin down:

• Heavy A & B & ... --> X & Y fan-out plus several <--> cross-subgraph edges
  produce a very dense edge set; our layout engine doesn't route/space these as
  cleanly as mermaid.js yet (crossings/overlap). This is the main fidelity gap.
• subgraph 业务客户端 PEP (a title containing a space) is mis-parsed — we
  treat the first word as an id and only show the rest as the title. Single-word
  CJK titles render fine. This is a clear bug we'll fix.
• The sequence diagram uses autonumber, which we don't implement yet, so the
  message numbers won't appear (alt/else and participant ... as ... do work).

A screenshot of the broken inline render would help us split "layout fidelity"
from "doesn't scale to pane" — and once 0.3.1 ships, a retest with the new popup
viewer would be useful too.

I'll break this into follow-up items: (a) inline fit-to-width, (b) subgraph
header-with-spaces parsing, (c) autonumber support, (d) dense fan-out layout
quality. Thanks for helping us tighten the native renderer!