2021年4月12日

draw如何在GitHub markdown中嵌入图表

您可以通过多种不同方式在Github自述文件中使用版本化的图,并包括用于编辑图或将其用作新图模板的链接。

您也可以将Github用作图表的存储位置,即使您不打算在README文件中显示它们也是如此。

与Github集成以显示和编辑图时使用了diagrams.net嵌入模式,该图的存储由主机应用程序(Github)负责,而diagrams.net用于图的编辑。

Github中的嵌入式图和图编辑支持以下文件格式:.png,.svg,.html和.xml (默认)

在Github Wiki Markdown中嵌入图表

将图表另存为可编辑的.png或.svg图像。

编辑图表时,选择“文件” “导出为” “ PNG”或“文件” “导出为” “ SVG”,并确保选中“包括我的图表的副本”复选框。

在您的Github降价中,包括或不包含alt文本的情况下,正常包含这些图像。例如:![此处为替代文字](images / someimage.png)

在Github Wiki页面中查看此图示例

在Github自述文件中编辑图表

使用文件编辑diagram.html,可以从我们的Github上库,可以使开发人员能够编辑相应的访问嵌入在Github上降价页中的图示。

该编辑diagram.html以嵌入方式与Github上和用途diagrams.net文件接口,使您可以编辑和保存存储在存储库图。需要以下URL参数:user,pass,repo,path,ref和action = open。

使用action = open,并传递用户和传递参数来创建链接,这些链接使您的开发人员可以立即编辑图。您的链接将类似于以下内容。

http://jgraph.github.io/drawio-github/edit-diagram.html?repo=drawio-github&path=diagram.png

使用嵌入式可编辑图表查看此Github README文件

使用Github中的图表作为模板

将图作为URL参数传递到diagrams.net,以使用存储在Github中的图作为模板。您的链接如下所示:

https://app.diagrams.net/#Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fjgraph%2Fdrawio-github%2Fmaster%2Fdiagram.png

在Github Markdown中嵌入自编辑SVG图像

您可以显示带有嵌入式PNG数据的SVG文件(以支持无法使用foreignObject的Internet Explorer用户)。SVG文件将可以在Markdown中包含的图像格式与<img src =“ …”>结合在一起,并具有用于Github集成的脚本。

要编辑这样的“自编辑” SVG图像,您需要构建如下链接:

http://jgraph.github.io/drawio-github/self-editing.svg

使用HTML作为自我编辑图表的容器

您可以使用nanocms.js(用于Github界面和图编辑功能)以及Bootstrap和nanocms.css(用于CSS样式)来构建带有嵌入式图的“自编辑” HTML文件。HTML可以这种方式与多种格式的图表一起使用,包括包含链接的嵌入式SVG。

请转到以下包含图表的自编辑HTML文件的示例