PlanetUML에서 Mermaid로 전환할 수 있는 서비스가 공개되면...

개요

최근github의 대응으로 메르메드가 뜨거워졌지만 이전에 사용했던 PlanetUML을 사용한 사람들이 많죠.
따라서 PlanetUML에서 Mermaid로 전환하는 서비스가 실현되었다.
PlanetUML->Mermaid 변환기

현재는 ER 그림과 시퀀스 그림만 지원하고 앞으로도 다른 그림을 지원할 것입니다.

기본 구조

전환할 때 하는 일은 다음과 같다

1. PlantUMLを構文解析して、JSのObjectに変換
2. JSのObjectをMermaidに変換

이런 흐름

서비스에 빠지기 전에 PlanetUML에서 Mermaid로의 전환을 통일적으로 진행했지만 함수를 분할하여 각자의 역할에 집중할 수 있어 코드가 상당히 간단해졌다.
PlanetUML의 문법 해석 부분은 다음과 같이 각 줄을 정규 표현식으로 해석하고 Object에 들어갑니다.

    // analyze PlantUML text
    for (let line of lines) {
      if(line.match('(participant|actor|boudary|control|entity|database|collections|queue) .+( as .+|)')){ 
        //block
      } else if(line.match('(activate|deactivate) .*')){
        //activate or deactivate
      } else if(line.match('.+ ((<|).*-.*(>|)) .+ :.+')) { 
        // relation
      }
    }

프로그램과 같이 정규 표현식에 적용되지 않는 항목은 Mermaid 변환이 불가능합니다.이렇듯'언어의 의미와 무관한 정보를 제거하고 의미와 관련된 정보만 추출하는 문법트리'는 추상적 문법 나무(AST)라고 불린다.🙇‍♂️ )

やっていて困ったこと

Mermaid의 React 구성 요소는 Next입니다.js에서 사용할 수 없습니다

처음에는 react-mermaid2 실시간 재현도를 사용하려고 했지만 적용하면 다음과 같은 오류가 발생할 수 있습니다...

Error: Must use import to load ES Module: /Users/hogehoge/index.js
require() of ES modules is not supported.
require() of /Users/hogehoge/index.js from /Users/hogehoge/node_modules/mermaid/dist/mermaid.core.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/hogehoge/package.json.

파일 확장자가 .mjs인지 패키지인지 조사됐다.json에 대해 추가type: "module" 필요
하지만 자신이라면 해결할 수 없기 때문에 전환이 끝날 때 그림을 다시 시작합니다.(앞으로 이 문제를 해결하고 싶은데...)

const svg = mermaid.mermaidAPI.render('hoge', mermaidText)
document.getElementById("svgCode").insertAdjacentHTML('afterbegin', svg)

금후

PlanetUML의 문법 해석 성능이 아직 낮기 때문에 변환 정밀도를 더욱 높일 수 있도록 프로그램을 수정할 것입니다🔥