mirror of
https://github.com/zed-industries/zed.git
synced 2026-05-31 19:05:00 +07:00
63f725e8d6
Big PR that replaces `mermaid-rs` with `merman`. Adds a new crate `mermaid_render` that exposes a simple API for rendering a mermaid diagram to an SVG string. ## Why is it so big? Some of this is explained in the crate-level docs for `mermaid_render`, but the short version is: - `mermaid-rs` emits "good enough" SVGs for most use cases. It also ships with a reasonable default theme - `merman` emits *very accurate* SVGs, but with borderline unusable CSS - Most of the new code in this PR are a series of passes to clean up the output SVG by: - Injecting good CSS - Fixing issues in the `merman`-generated SVGs - Tweaking the final result to avoid issues with `usvg` and `resvg`, which are what will eventually be used to rasterize the SVG - This code *could* be much smaller, but the following design decisions made it take a lot more code: - Using a real XML parser instead of basic string manipulation - Avoiding allocating strings in as many places as possible Because of this, the design is as follows: - First, construct a `merman` theme from the user's theme, and render the mermaid to an SVG string - Post-process - each step is roughly a `fn(Iterator<Item = Event<'short>>) -> Iterator<Item = Event<'short>>`, where `Event` is the type for events produced by `quick-xml` (a pull-based XML parser) ## Note for reviewers It's a big diff, sorry 😅 happy to pair review. The new crate is essentially a leaf crate - it does technically depend on `gpui`, but only for the `Hsla` and `Rgba` types. Extracting a new `gpui_color` crate felt like overkill for this already-very-big PR. Each post-process pass is in its own submodule, and has a doc comment explaining the before/after. Note that bugs in this code are perhaps less serious than bugs in other parts of the code: - The code has been thoroughly audited for potentially-panicking code paths - as far as I know, there are none (excluding some `.expect()`s on calls to `write!` with `String`, which is [cannot return `Err`][string write]) - A bug in this code (given that it will not cause a panic) will, at worst, result in an invalid diagram being rendered, or simply falling back to showing the code. - The current `mermaid-rs` renderer *already* does this in quite a lot of cases, sometimes showing outright misleading information. --- Some eye candy: | Before (`mermaid-rs`) | After (`merman`) | | - | - | | <img width="1227" height="340" alt="image" src="https://github.com/user-attachments/assets/58d6904e-64bc-478a-8d67-f75ad4ccbc9e" /> | <img width="1169" height="482" alt="image" src="https://github.com/user-attachments/assets/d4bb9cd5-240f-4bf6-ba7f-4862049ed8b0" /> | | <img width="842" height="564" alt="image" src="https://github.com/user-attachments/assets/1668a50d-68f6-4145-8cef-359e4c6a4589" /> | <img width="869" height="543" alt="image" src="https://github.com/user-attachments/assets/2ec1a7eb-fc3c-4392-b577-1ad52396b87c" /> | | Failed to render | <img width="822" height="1123" alt="image" src="https://github.com/user-attachments/assets/a97308a1-6b3a-48b6-9778-abf3507c6ad3" /> | | <img width="252" height="517" alt="image" src="https://github.com/user-attachments/assets/dbf86274-004a-4ee4-be89-cc6ff4f6cf35" /> | <img width="361" height="680" alt="image" src="https://github.com/user-attachments/assets/8457b6ed-3ca9-4bed-9496-60388ba08206" /> | | <img width="550" height="1050" alt="image" src="https://github.com/user-attachments/assets/c21b8513-fb86-422e-870a-015e0add783a" /> | <img width="819" height="1148" alt="image" src="https://github.com/user-attachments/assets/ca646165-302d-41aa-8da5-39e89c96ebb7" /> | | <img width="1218" height="225" alt="image" src="https://github.com/user-attachments/assets/3006a1bf-efe6-46f5-9f9d-289a3fdf9adc" /> | <img width="1118" height="965" alt="image" src="https://github.com/user-attachments/assets/90d76098-bf3d-4c69-bc9b-00dd9cbf6990" /> | | <img width="800" height="584" alt="image" src="https://github.com/user-attachments/assets/f688693b-df3d-4514-b105-ccaa3874e40c" /> | <img width="1153" height="417" alt="image" src="https://github.com/user-attachments/assets/eeb05f58-7184-4321-a47b-ea3cc53f0d02" /> | | <img width="539" height="464" alt="image" src="https://github.com/user-attachments/assets/0076105d-eef9-4011-9b9a-581918575e49" /> | <img width="638" height="556" alt="image" src="https://github.com/user-attachments/assets/72a51966-c296-48d0-b1e2-66835b1a0d5b" /> | | <img width="607" height="430" alt="image" src="https://github.com/user-attachments/assets/d3530814-532b-41ed-a2b6-fd5740d8db58" /> | <img width="725" height="489" alt="image" src="https://github.com/user-attachments/assets/c43687d9-f426-4cb8-8a45-23a3c0070c8f" /> | | <img width="869" height="577" alt="image" src="https://github.com/user-attachments/assets/b607f3fd-136c-4f41-a88e-596520e276b9" /> | <img width="784" height="586" alt="image" src="https://github.com/user-attachments/assets/22305a64-b4d0-474a-b6f6-8973f2bca933" /> | | <img width="1214" height="263" alt="image" src="https://github.com/user-attachments/assets/183ff0df-a6f3-470c-b271-8099c3e33044" /> | <img width="1195" height="632" alt="image" src="https://github.com/user-attachments/assets/868bcb7f-62c6-4d20-ba1e-3f25f8165fff" /> | | <img width="573" height="597" alt="image" src="https://github.com/user-attachments/assets/6414e409-b879-4892-8ef6-89489219b56f" /> | <img width="578" height="608" alt="image" src="https://github.com/user-attachments/assets/8ac71b03-f603-4e32-87aa-b993317d4e29" /> | | <img width="543" height="472" alt="image" src="https://github.com/user-attachments/assets/1f19929c-cf07-4287-b9cf-b976eea9faaa" /> | <img width="760" height="599" alt="image" src="https://github.com/user-attachments/assets/73926075-db47-4eb1-854e-7aee30522684" /> | | <img width="1205" height="219" alt="image" src="https://github.com/user-attachments/assets/5f3dc936-4b89-44f4-a00a-4dbc47e06504" /> | <img width="1133" height="349" alt="image" src="https://github.com/user-attachments/assets/e62901ff-9d75-4fde-a30e-974ff2e783b1" /> | Release Notes: - Improved: Mermaid diagrams now render faster and more accurately [string write]: https://doc.rust-lang.org/src/alloc/string.rs.html#3342-3354 --------- Co-authored-by: Danilo Leal <daniloleal09@gmail.com> Co-authored-by: zed-zippy[bot] <234243425+zed-zippy[bot]@users.noreply.github.com>
27 lines
548 B
TOML
27 lines
548 B
TOML
[package]
|
|
name = "mermaid_render"
|
|
version = "0.1.0"
|
|
edition.workspace = true
|
|
publish.workspace = true
|
|
license = "GPL-3.0-or-later"
|
|
|
|
[lints]
|
|
workspace = true
|
|
|
|
[lib]
|
|
path = "src/mermaid_render.rs"
|
|
doctest = false
|
|
|
|
[features]
|
|
test-support = []
|
|
|
|
[dependencies]
|
|
anyhow.workspace = true
|
|
gpui.workspace = true
|
|
merman = { version = "0.4", features = ["render"] }
|
|
quick-xml.workspace = true
|
|
serde_json.workspace = true
|
|
|
|
[dev-dependencies]
|
|
gpui = { workspace = true, features = ["test-support"] }
|
|
mermaid_render = { path = ".", features = ["test-support"] }
|