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

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

  •  
  •   plane · 14 天前 · 2943 次点击

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

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

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

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