在线网站无锡网站建设wkstt

当前位置： 首页 > news >正文

在线网站,无锡网站建设wkstt,安康市网站开发,公司部门解散Mermaid 系列 如何使用 Mermaid、GitHub 和 VSCode 用代码创建关系图一如何使用 Mermaid、GitHub 和 VSCode 用代码创建关系图二
1.如何创建甘特图 Gantt 甘特图以条形图的形式用作可视化表示。它有效地展示了项目的时间表#xff0c;揭示了各个项目组件完成所需的持续时间…Mermaid 系列 如何使用 Mermaid、GitHub 和 VSCode 用代码创建关系图一如何使用 Mermaid、GitHub 和 VSCode 用代码创建关系图二
1.如何创建甘特图 Gantt 甘特图以条形图的形式用作可视化表示。它有效地展示了项目的时间表揭示了各个项目组件完成所需的持续时间。 您可以使用以下示例在 Mermaid 中渲染甘特图 #mermaid-svg-7QMGSFMi8Zh564EE {font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-7QMGSFMi8Zh564EE .error-icon{fill:#552222;}#mermaid-svg-7QMGSFMi8Zh564EE .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-7QMGSFMi8Zh564EE .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-7QMGSFMi8Zh564EE .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-7QMGSFMi8Zh564EE .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-7QMGSFMi8Zh564EE .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-7QMGSFMi8Zh564EE .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-7QMGSFMi8Zh564EE .marker{fill:#333333;stroke:#333333;}#mermaid-svg-7QMGSFMi8Zh564EE .marker.cross{stroke:#333333;}#mermaid-svg-7QMGSFMi8Zh564EE svg{font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-7QMGSFMi8Zh564EE .mermaid-main-font{font-family:“trebuchet ms”,verdana,arial,sans-serif;font-family:var(–mermaid-font-family);}#mermaid-svg-7QMGSFMi8Zh564EE .exclude-range{fill:#eeeeee;}#mermaid-svg-7QMGSFMi8Zh564EE .section{stroke:none;opacity:0.2;}#mermaid-svg-7QMGSFMi8Zh564EE .section0{fill:rgba(102, 102, 255, 0.49);}#mermaid-svg-7QMGSFMi8Zh564EE .section2{fill:#fff400;}#mermaid-svg-7QMGSFMi8Zh564EE .section1,#mermaid-svg-7QMGSFMi8Zh564EE .section3{fill:white;opacity:0.2;}#mermaid-svg-7QMGSFMi8Zh564EE .sectionTitle0{fill:#333;}#mermaid-svg-7QMGSFMi8Zh564EE .sectionTitle1{fill:#333;}#mermaid-svg-7QMGSFMi8Zh564EE .sectionTitle2{fill:#333;}#mermaid-svg-7QMGSFMi8Zh564EE .sectionTitle3{fill:#333;}#mermaid-svg-7QMGSFMi8Zh564EE .sectionTitle{text-anchor:start;font-family:‘trebuchet ms’,verdana,arial,sans-serif;font-family:var(–mermaid-font-family);}#mermaid-svg-7QMGSFMi8Zh564EE .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#mermaid-svg-7QMGSFMi8Zh564EE .grid .tick text{font-family:“trebuchet ms”,verdana,arial,sans-serif;fill:#333;}#mermaid-svg-7QMGSFMi8Zh564EE .grid path{stroke-width:0;}#mermaid-svg-7QMGSFMi8Zh564EE .today{fill:none;stroke:red;stroke-width:2px;}#mermaid-svg-7QMGSFMi8Zh564EE .task{stroke-width:2;}#mermaid-svg-7QMGSFMi8Zh564EE .taskText{text-anchor:middle;font-family:‘trebuchet ms’,verdana,arial,sans-serif;font-family:var(–mermaid-font-family);}#mermaid-svg-7QMGSFMi8Zh564EE .taskTextOutsideRight{fill:black;text-anchor:start;font-family:‘trebuchet ms’,verdana,arial,sans-serif;font-family:var(–mermaid-font-family);}#mermaid-svg-7QMGSFMi8Zh564EE .taskTextOutsideLeft{fill:black;text-anchor:end;}#mermaid-svg-7QMGSFMi8Zh564EE .task.clickable{cursor:pointer;}#mermaid-svg-7QMGSFMi8Zh564EE .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-7QMGSFMi8Zh564EE .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-7QMGSFMi8Zh564EE .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-7QMGSFMi8Zh564EE .taskText0,#mermaid-svg-7QMGSFMi8Zh564EE .taskText1,#mermaid-svg-7QMGSFMi8Zh564EE .taskText2,#mermaid-svg-7QMGSFMi8Zh564EE .taskText3{fill:white;}#mermaid-svg-7QMGSFMi8Zh564EE .task0,#mermaid-svg-7QMGSFMi8Zh564EE .task1,#mermaid-svg-7QMGSFMi8Zh564EE .task2,#mermaid-svg-7QMGSFMi8Zh564EE .task3{fill:#8a90dd;stroke:#534fbc;}#mermaid-svg-7QMGSFMi8Zh564EE .taskTextOutside0,#mermaid-svg-7QMGSFMi8Zh564EE .taskTextOutside2{fill:black;}#mermaid-svg-7QMGSFMi8Zh564EE .taskTextOutside1,#mermaid-svg-7QMGSFMi8Zh564EE .taskTextOutside3{fill:black;}#mermaid-svg-7QMGSFMi8Zh564EE .active0,#mermaid-svg-7QMGSFMi8Zh564EE .active1,#mermaid-svg-7QMGSFMi8Zh564EE .active2,#mermaid-svg-7QMGSFMi8Zh564EE .active3{fill:#bfc7ff;stroke:#534fbc;}#mermaid-svg-7QMGSFMi8Zh564EE .activeText0,#mermaid-svg-7QMGSFMi8Zh564EE .activeText1,#mermaid-svg-7QMGSFMi8Zh564EE .activeText2,#mermaid-svg-7QMGSFMi8Zh564EE .activeText3{fill:black!important;}#mermaid-svg-7QMGSFMi8Zh564EE .done0,#mermaid-svg-7QMGSFMi8Zh564EE .done1,#mermaid-svg-7QMGSFMi8Zh564EE .done2,#mermaid-svg-7QMGSFMi8Zh564EE .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#mermaid-svg-7QMGSFMi8Zh564EE .doneText0,#mermaid-svg-7QMGSFMi8Zh564EE .doneText1,#mermaid-svg-7QMGSFMi8Zh564EE .doneText2,#mermaid-svg-7QMGSFMi8Zh564EE .doneText3{fill:black!important;}#mermaid-svg-7QMGSFMi8Zh564EE .crit0,#mermaid-svg-7QMGSFMi8Zh564EE .crit1,#mermaid-svg-7QMGSFMi8Zh564EE .crit2,#mermaid-svg-7QMGSFMi8Zh564EE .crit3{stroke:#ff8888;fill:red;stroke-width:2;}#mermaid-svg-7QMGSFMi8Zh564EE .activeCrit0,#mermaid-svg-7QMGSFMi8Zh564EE .activeCrit1,#mermaid-svg-7QMGSFMi8Zh564EE .activeCrit2,#mermaid-svg-7QMGSFMi8Zh564EE .activeCrit3{stroke:#ff8888;fill:#bfc7ff;stroke-width:2;}#mermaid-svg-7QMGSFMi8Zh564EE .doneCrit0,#mermaid-svg-7QMGSFMi8Zh564EE .doneCrit1,#mermaid-svg-7QMGSFMi8Zh564EE .doneCrit2,#mermaid-svg-7QMGSFMi8Zh564EE .doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges;}#mermaid-svg-7QMGSFMi8Zh564EE .milestone{transform:rotate(45deg) scale(0.8,0.8);}#mermaid-svg-7QMGSFMi8Zh564EE .milestoneText{font-style:italic;}#mermaid-svg-7QMGSFMi8Zh564EE .doneCritText0,#mermaid-svg-7QMGSFMi8Zh564EE .doneCritText1,#mermaid-svg-7QMGSFMi8Zh564EE .doneCritText2,#mermaid-svg-7QMGSFMi8Zh564EE .doneCritText3{fill:black!important;}#mermaid-svg-7QMGSFMi8Zh564EE .activeCritText0,#mermaid-svg-7QMGSFMi8Zh564EE .activeCritText1,#mermaid-svg-7QMGSFMi8Zh564EE .activeCritText2,#mermaid-svg-7QMGSFMi8Zh564EE .activeCritText3{fill:black!important;}#mermaid-svg-7QMGSFMi8Zh564EE .titleText{text-anchor:middle;font-size:18px;fill:#333;font-family:‘trebuchet ms’,verdana,arial,sans-serif;font-family:var(–mermaid-font-family);}#mermaid-svg-7QMGSFMi8Zh564EE :root{–mermaid-font-family:“trebuchet ms”,verdana,arial,sans-serif;} 01/01 02/01 03/01 04/01 05/01 06/01 Define Project Research Define Requirements Design Implementation Unit Testing Integration Testing Deploy User Training Ongoing Support Planning Development Testing Deployment Maintenance Project Schedule 语法细分 gantt 指定要在mermaind中呈现甘特图。title表示项目标题。dateFormat YYYY-MM-DD 是图表的输入日期格式。axisFormat %m/%d 表示 x 轴中显示的日期格式即输出日期。section 用于分隔项目的不同部分。 x 轴表示时间y 轴记录不同的任务及其完成顺序。

1. 如何创建饼图 Pie 饼图也称为圆图是用于显示统计数据的圆形视觉表示形式。它被划分为多个段或切片以直观地传达不同类别或值的数字比例。 下面是在mermaid中创建饼图的示例 #mermaid-svg-A1ywQCBHp5y2UlEA {font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-A1ywQCBHp5y2UlEA .error-icon{fill:#552222;}#mermaid-svg-A1ywQCBHp5y2UlEA .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-A1ywQCBHp5y2UlEA .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-A1ywQCBHp5y2UlEA .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-A1ywQCBHp5y2UlEA .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-A1ywQCBHp5y2UlEA .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-A1ywQCBHp5y2UlEA .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-A1ywQCBHp5y2UlEA .marker{fill:#333333;stroke:#333333;}#mermaid-svg-A1ywQCBHp5y2UlEA .marker.cross{stroke:#333333;}#mermaid-svg-A1ywQCBHp5y2UlEA svg{font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-A1ywQCBHp5y2UlEA .pieCircle{stroke:black;stroke-width:2px;opacity:0.7;}#mermaid-svg-A1ywQCBHp5y2UlEA .pieTitleText{text-anchor:middle;font-size:25px;fill:black;font-family:“trebuchet ms”,verdana,arial,sans-serif;}#mermaid-svg-A1ywQCBHp5y2UlEA .slice{font-family:“trebuchet ms”,verdana,arial,sans-serif;fill:#333;font-size:17px;}#mermaid-svg-A1ywQCBHp5y2UlEA .legend text{fill:black;font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:17px;}#mermaid-svg-A1ywQCBHp5y2UlEA :root{–mermaid-font-family:“trebuchet ms”,verdana,arial,sans-serif;} 60% 15% 10% 15% Distribution of Expenses Food Rent Entertainment Savings 语法细分 pie 表示我们正在创建一个饼图。title 设置饼图的标题。双引号中的项目代表类别例如“Food,” “Rent,” “Entertainment,” “Savings”。冒号后面的数字表示每个类别的比例或百分比。在这种情况下“食物”占据了图表的 60%“租金”占 15%“娱乐”占 10%“储蓄”占 15%。
2. 总结 在本文中我们只是触及了 Mermaid 中渲染图的表面。这些图表是高度可定制的还允许您创建非常复杂的图表。 Mermaid 支持本教程中未提及的更多类型的图表。要了解有关Mermaid的更多信息请查看他们的官方文档。
   动手玩 Live demo 代码 https://github.com/zgpeace/pets-name-langchain/tree/develop 参考 https://www.freecodecamp.org/news/diagrams-as-code-with-mermaid-github-and-vs-code/