V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
plane
V2EX  ›  程序员

网上的 mermaidjs 编辑器生成图都太丑了,一怒之下写了一个新的

  •  
  •   plane · 2 天前 · 2257 次点击

    实在想不明白 2025 年了为什么程序员写文档还不能拥有一个好看的流程图生成器。😭 网上都是些什么古早编辑器。尤其 mermaid 已成为事实的最广泛各种流程图的标准了。

    大家伙,快来试用。

    https://mordern-mermaid.com

    https://quick.go-admin.cn/ai/mordern_mermaid/hkpt4ny3zs3g1.png https://quick.go-admin.cn/ai/mordern_mermaid/p84v87h9zs3g1.png https://quick.go-admin.cn/ai/mordern_mermaid/ruuounxdzs3g1.png https://quick.go-admin.cn/ai/mordern_mermaid/t6varfwyys3g1.png

    30 条回复    2025-11-29 18:33:24 +08:00
    BeCool
        1
    BeCool  
    PRO
       2 天前
    不错
    BeCool
        2
    BeCool  
    PRO
       2 天前   ❤️ 1
    SEO 小问题:代码里的 canonical 和 alternate 的域名错误。
    plane
        4
    plane  
    OP
       2 天前
    @BeCool 码上修
    plane
        5
    plane  
    OP
       2 天前
    @zeeler 哈哈看到了,支持了 excalldraw 的手绘风,后面再把 AI 的各种东西整进来
    veau
        6
    veau  
       2 天前
    我常用的是在 excalldraw 生成图。然后复制为 png 粘贴到方案里面去
    HENQIGUAI
        7
    HENQIGUAI  
       2 天前
    挺好,就是域名太长了
    DeWjjj
        8
    DeWjjj  
    PRO
       2 天前
    感觉这个有点麻烦,要按照既定格式去写,还没办法通过视图调整。
    maladaxia
        9
    maladaxia  
       2 天前
    大佬您好,
    你是 mermaid.js 库上加了样式吗

    我以前用 mermaid.js 这个库的时候, 遇到一个问题:
    svg 转 png 图片时文字缺失. 好像是 foreignObject 什么的问题.

    请教一下你是用什么方案转图片的?
    rrfeng
        10
    rrfeng  
       2 天前 via Android
    我选择 d2
    eddiego
        11
    eddiego  
       2 天前 via Android
    明天要汇报进度,正好用得上! 感谢大佬
    顺便说能加上手机端支持就更好了
    plane
        12
    plane  
    OP
       2 天前   ❤️ 1
    @maladaxia 直接用 html-to-image 搞
    plane
        13
    plane  
    OP
       2 天前
    @rrfeng respect
    plane
        14
    plane  
    OP
       2 天前
    @eddiego 手机端啊,可以支持一波,但优先级可能没那么高。用手机做图片会不会太卷了...手机不是用来刷短视频的吗[狗头]
    kapr1k0rn
        15
    kapr1k0rn  
       2 天前
    域名确定是 mordern 不是 modern ?
    plane
        16
    plane  
    OP
       2 天前
    @kapr1k0rn modern 被注册了。不过目前更新了新的域名: https://modern-mermaid.live
    tczzjin
        17
    tczzjin  
       2 天前
    默认进入页面的时候分隔符居中的,其实可以默认黄金比例分割,preview 侧更大更直接
    kapaseker
        18
    kapaseker  
       2 天前
    @DeWjjj mermaid 就是这样的,和 Markdown 文档差不多,格式也是固定的,渲染结果看渲染器怎么设定。
    limor
        19
    limor  
       2 天前
    掘金口味的标题
    plane
        20
    plane  
    OP
       2 天前
    @tczzjin 有道理
    plane
        21
    plane  
    OP
       2 天前
    一怒之下,增加上线了多四个主题:毛玻璃,粗鲁主义,波普主义,复古说明书。快用起来 xdm ,让你的文档让人刮目相看
    nickyadance23
        22
    nickyadance23  
       2 天前
    很棒,能解决问题
    plane
        23
    plane  
    OP
       2 天前
    @nickyadance23 有问题欢迎反馈🙌
    maladaxia
        24
    maladaxia  
       1 天前
    @plane 你这个网站确实比我自用的 wails 写的 app 好, 你早发布, 我还写啥 app 啊

    大大的赞👍, 啥时候开源周知一下
    plane
        25
    plane  
    OP
       1 天前
    @maladaxia 已经开源,帮帮忙 star 哈哈。https://github.com/gotoailab/modern_mermaid
    maladaxia
        26
    maladaxia  
       1 天前
    @plane 说时迟那时快,一怒之下就开源了😄
    zx900930
        27
    zx900930  
       1 天前
    mermaid 有个致命的缺点:画大型复杂架构图,subgraph 的 direction 会因为连线关系失效。导致渲染出来的图片嵌套子模块方向完全无法控制。
    这个 issue 已经挂了好几年了都没解决。而且所有的竞品比如 D2 都解决不了这个问题,最后还是只能手绘。
    plane
        28
    plane  
    OP
       1 天前
    @zx900930 是的这个蛋疼,就算不是大型图,好些情况下连线也会出现绕来绕去很丑。是一个需要修复的问题。但大部分情况还是 OK 的。
    nightwitch
        29
    nightwitch  
       1 天前
    @zx900930 #27 mermaid 还是只适合画小的图,对排版要求高的还是 draw.io 吧。它那个算法图一复杂经常把一些节点不知道排布到什么奇怪的地方
    maladaxia
        30
    maladaxia  
       1 天前
    @nightwitch draw.io 可以导入 mermaid 然后手动调整
    关于   ·   帮助文档   ·   自助推广系统   ·   博客   ·   API   ·   FAQ   ·   Solana   ·   2535 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 11:04 · PVG 19:04 · LAX 03:04 · JFK 06:04
    ♥ Do have faith in what you're doing.