Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

vditor支持FlowCharts的流程图语法 #773

Closed
Trojan0523 opened this issue Sep 29, 2020 · 5 comments
Closed

vditor支持FlowCharts的流程图语法 #773

Trojan0523 opened this issue Sep 29, 2020 · 5 comments
Assignees
Milestone

Comments

@Trojan0523
Copy link

你在什么场景下需要该功能?

我们在使用vditor的时候想支持Flowcharts的语法,请问vditor可以自行写拓展支持Flowcharts吗?
FlowCharts: https://github.com/adrai/flowchart.js

描述可能的解决方案

在vditor上使用FlowCharts

@Trojan0523
Copy link
Author

请问我应该怎么在vditor上支持FlowCharts的md语法编写,谢谢您

@Trojan0523
Copy link
Author

Trojan0523 commented Sep 29, 2020

这是FlowCharts的语法,我们想通过插件拓展的方式去看看能不能支持这里的写法和流程图展示

image

```flow
st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end

st->op->cond
cond(yes)->e
cond(no)->op
​```

@Vanessa219
Copy link
Owner

可以参照 mermaidRender.ts 后 PR 或 fork 后自己修改

@Trojan0523
Copy link
Author

Trojan0523 commented Oct 11, 2020

您好,我想请问我有一种想法就是不修改源代码,可否在预览前进行回调,将需要支持语法的部分进行修改渲染,然后进行返回呢?使用preview.transform进行传入HTMLDIVElement:

transform: html => {
            const el = document.querySelector("pre > code");
            if (el.className === "language-flow") {
              const diagram = window.flowchart.parse(el.innerText);
              diagram.drawSVG("flowchart");
              return (
                '<pre class="language-flow">' +
                document.querySelector("#flowchart").innerHTML +
                "</pre>"
              );
            }
            return html;
          }

我想请问下这种方案会影响本身的渲染流程吗?

@Vanessa219
Copy link
Owner

可能不行,在文字输入的时候渲染可能会有问题

@Vanessa219 Vanessa219 self-assigned this Oct 11, 2020
@Vanessa219 Vanessa219 added this to the 3.5 milestone Oct 11, 2020
@Vanessa219 Vanessa219 modified the milestones: 3.5, 3.6 Oct 11, 2020
@Vanessa219 Vanessa219 modified the milestones: 3.6, 3.5 Oct 12, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants