通过flowchart.fun使用文本快速生成流程图

常用语法

线条样式

开始
  .dashed 会员: 直接使用
  .dotted 非会员: 先付费

效果预览

  • .dashed 虚线
  • .dotted 点线
  • 与线上文字用空格分开,:结尾,和内容之间空格区分,如.dotted 非会员: 先付费
  • 线上不设置文字直接:结尾,和内容之间空格区分,如.dotted: 先付费

设置箭头样式

案例:

开始
  .source-triangle: 会员
    .source-circle.target-circle: 非会员
      .target-chevron: (开始)

  • .source-triangle 双向箭头
  • .source-circle.target-circle 双向圆箭头
    • .source-circle 上圆
    • .target-circle 下圆
  • .target-chevron: (*) 回指某个节点,将*换成节点内容

设置节点边框

案例:

虚线 .border-dashed
点线 .border-dotted
实线 .border-double
无线 .border-none

效果预览

扩展语法

设置字体大小

案例:

常规
  小于常规 .text-sm
  大于常规 .text-lg
  超大 .text-xl

效果演示:

  • 加上默认,一共四个文字大小

自定义宽度和高度

案例:

开始 [W=200]
开始 [H=200]
开始 [W=200][H=200]
  • 设置节点宽度用 [w=200] ,设置节点宽度用 [h=200]
  • 单位是像素,不用输入单位
  • 可以只配置一个,或者两个都配置
  • 宽高参数前面要有个空格隔开

插入图片

案例:

这里有一张图片 [src="https://picx.zhimg.com/42d2de2ab_l.jpg"][w=50][h=50]

效果预览

  • 通过图片链接设置图片,图片会显示在文字上面,可以设置宽高
    • 不是所有图片链接都可以正常显示,可能是域名问题或者图片格式问题
    • 设置图片后就只能设置图片的宽高了,不能设置矩形的宽高
    • 图片参数前面要有个空格隔开

插入网页链接

案例

打开像素笔记 [href="https://1px.run"]

相关链接

  • 官方Github: https://github.com/tone-row/flowchart-fun

回到顶部

Copyright © 2017-2024 1px.run (像素教程) Distributed by an MIT license.

Site updated at 2024-06-15 13:12