在Markdown中使用Mermaid来绘制用户旅程图
2024-04-23 23:50:02
1. 定义
2. 基本语法
journeytitle My working daysection Go to workMake tea: 5: MeGo upstairs: 3: MeDo work: 1: Me, Catsection Go homeGo downstairs: 5: MeSit down: 5: Me3. 实例展示
#mermaid-svg-dMExRmUo7OFzASyy {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-dMExRmUo7OFzASyy .error-icon{fill:#552222;}#mermaid-svg-dMExRmUo7OFzASyy .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-dMExRmUo7OFzASyy .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-dMExRmUo7OFzASyy .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-dMExRmUo7OFzASyy .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-dMExRmUo7OFzASyy .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-dMExRmUo7OFzASyy .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-dMExRmUo7OFzASyy .marker{fill:#333333;stroke:#333333;}#mermaid-svg-dMExRmUo7OFzASyy .marker.cross{stroke:#333333;}#mermaid-svg-dMExRmUo7OFzASyy svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-dMExRmUo7OFzASyy .label{font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);color:#333;}#mermaid-svg-dMExRmUo7OFzASyy .mouth{stroke:#666;}#mermaid-svg-dMExRmUo7OFzASyy line{stroke:#333;}#mermaid-svg-dMExRmUo7OFzASyy .legend{fill:#333;}#mermaid-svg-dMExRmUo7OFzASyy .label text{fill:#333;}#mermaid-svg-dMExRmUo7OFzASyy .label{color:#333;}#mermaid-svg-dMExRmUo7OFzASyy .face{fill:#FFF8DC;stroke:#999;}#mermaid-svg-dMExRmUo7OFzASyy .node rect,#mermaid-svg-dMExRmUo7OFzASyy .node circle,#mermaid-svg-dMExRmUo7OFzASyy .node ellipse,#mermaid-svg-dMExRmUo7OFzASyy .node polygon,#mermaid-svg-dMExRmUo7OFzASyy .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-dMExRmUo7OFzASyy .node .label{text-align:center;}#mermaid-svg-dMExRmUo7OFzASyy .node.clickable{cursor:pointer;}#mermaid-svg-dMExRmUo7OFzASyy .arrowheadPath{fill:#333333;}#mermaid-svg-dMExRmUo7OFzASyy .edgePath .path{stroke:#333333;stroke-width:1.5px;}#mermaid-svg-dMExRmUo7OFzASyy .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-dMExRmUo7OFzASyy .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-dMExRmUo7OFzASyy .edgeLabel rect{opacity:0.5;}#mermaid-svg-dMExRmUo7OFzASyy .cluster text{fill:#333;}#mermaid-svg-dMExRmUo7OFzASyy div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-dMExRmUo7OFzASyy .task-type-0,#mermaid-svg-dMExRmUo7OFzASyy .section-type-0{fill:#ECECFF;}#mermaid-svg-dMExRmUo7OFzASyy .task-type-1,#mermaid-svg-dMExRmUo7OFzASyy .section-type-1{fill:#ffffde;}#mermaid-svg-dMExRmUo7OFzASyy .task-type-2,#mermaid-svg-dMExRmUo7OFzASyy .section-type-2{fill:hsl(304, 100%, 96.2745098039%);}#mermaid-svg-dMExRmUo7OFzASyy .task-type-3,#mermaid-svg-dMExRmUo7OFzASyy .section-type-3{fill:hsl(124, 100%, 93.5294117647%);}#mermaid-svg-dMExRmUo7OFzASyy .task-type-4,#mermaid-svg-dMExRmUo7OFzASyy .section-type-4{fill:hsl(176, 100%, 96.2745098039%);}#mermaid-svg-dMExRmUo7OFzASyy .task-type-5,#mermaid-svg-dMExRmUo7OFzASyy .section-type-5{fill:hsl(-4, 100%, 93.5294117647%);}#mermaid-svg-dMExRmUo7OFzASyy .task-type-6,#mermaid-svg-dMExRmUo7OFzASyy .section-type-6{fill:hsl(8, 100%, 96.2745098039%);}#mermaid-svg-dMExRmUo7OFzASyy .task-type-7,#mermaid-svg-dMExRmUo7OFzASyy .section-type-7{fill:hsl(188, 100%, 93.5294117647%);}:root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}CatMe
Go to work
Go to workMe
Make tea
Make teaMe
Go upstairs
Go upstairsMeCat
Do work
Do work
Go home
Go homeMe
Go downstairs
Go downstairsMe
Sit down
Sit downMy working day
不是很重要
在Markdown中使用Mermaid来绘制用户旅程图相关推荐
- 产品经理硬技能——绘制用户旅程图
编辑导语:产品经理在日常工作中对于产品流程的把控以及推动起到了很大的作用,但随着产品经理的职业生涯不断发展,产品经理技能也需要不断完善和进步:本文作者分享了关于产品经理的硬技能--绘制用户旅程图,我们 ...
- 在Markdown中使用Mermaid来绘制流程图
1.流程图定义与节点名称 定义代码: flowchart LRA[Start] --> B 注意:在使用的时候一定要将该部分的内容包含到代码块中 演示效果: #mermaid-svg-ZG1To ...
- 【MarkDown】CSDN Markdown之用户旅程图journey详解
用户旅程图 用户旅程图以高度详细的方式描述了不同用户在系统.应用或网站内等完成特定任务所采取的确切步骤.这种技术展示了当前(现状)用户的工作流程,并揭示了未来(预期)工作流程的改进空间. Mermai ...
- 手把手教你制作用户旅程图 产品经理千万不能错过
如今一名优秀产品经理的硬核技能中有一项必须达标的便是用户旅程图!所谓用户旅程图乃是一种可视化的工具,是将用户为了完成某个特定目标而需要经历的过程完整绘制出来.本文将分享如何使用BoardMix博思白板 ...
- 用户旅程图与服务蓝图：到底有什么区别？
导语:本文的原作者Megan Erin Miller一直在斯坦福大学从事服务设计工作,她致力于在商业管理中探索创新和以人为本的设计实践.作者深入浅出地分析了用户旅程图以及服务蓝图的共性和差异,让我们一 ...
- Markdown文档生成流程图、时序图、类图、状态图、ER图、用户旅程图、甘特图、饼图等
简介 流程图.时序图.类图.状态图.ER图.用户旅程图.甘特图.饼图等这些图都可以以文本的形式插入到Markdown文档中,使用一种叫mermaid的语法. 是一种用文本描述图形的方法. 下面的代码, ...
- 值得收藏的制作用户旅程图教程
编辑导语:在产品后续的迭代升级中,用户需求与用户体验是产品迭代的重要依据因素之一.其中,用户旅程图直接.清晰地描述了用户人机交互时的体验,而通过可视化地图的创建,团队可以有效推动后续的业务协作.本文作 ...
- python如何画出多个独立的图片_如何使用python语言中的可视化工具绘制多个图
在使用的matplotlib第三方包的过程中,可以在画布上绘制一个图形之外,还可以绘制多个图形,根据分布来构成图形.下面利用具体的实例说明如何实现,操作如下: 工具/原料 python 截图工具 方法 ...
- Mermaid语法绘制图表
Typora 在画图方面的小技巧Mermaid,Mermaid是一种简单的类似 Markdown 的脚本语言,通过 JavaScript 编程语言,将文本转换为图片,支持绘制非常多种类的图,常见的有时 ...
最新文章
- Action访问Servlet API的三种方法
- 未来的数据中心(二)
- python面向对象(part2)--封装
- 程序员买房与程序员转型
- Probability, Matringale,Markov Chain, MCMC
- C语言 · 芯片测试
- python 实例方法和类方法的区别_python中实例方法，类方法和静态方法的区别。...
- hihoCoder挑战赛14 -1223
- centos yum出错：Cannot find a valid baseurl for repo
- 知行动手实验室可以用来做什么？
- lesson1 ODE的几何解法：方向场，积分曲线
- mysql问题_MySQL 各种问题解决方案（一）
- “长按地址在浏览器中打开”的解决办法
- 数据结构（C语言）超详细视频教程
- Proteus仿真：存储器
- SIEBEL基础学习
- 一分钟给大量视频褪色并加马赛克
- 设置/etc/fstab实现自动挂载
- java编程成绩评分分等级_java编写成绩等级，最高分为best
- 解密dlink固件（四）