[Question] About dsl with mermaid, to check it on vscode.

[PorcoRosso85]

Hi, thanks for your great app.

I've tried previewing mermaid syntax stored, but I got diagram which is not enough. I want to preview mermaid on vscode, what extension do you use? OR does support your DSL?

BTW, 'enough' 'expected' means:

• if interface contains other interface definition, allow will be there I think refering your example, right?

Where I tried:

• mermaid live link
• vscode markdown preview

stored DSL is:

classDiagram
class WebApp{
            +endpoint: string
+component: JSXElement[]
+handler: (event: any) =~ void

        }
class User{
            +id: string
+name: string

        }
class JSXElement {
            <<interface>>
            +type: string
+props: any
+children: FunctionHtmlTable[]

        }
class User {
            <<interface>>
            +id: string
+name: string

        }
class Account {
            <<interface>>
            +id: string
+userId: string[]
+name: string

        }
class UserWhoHasAccount {
            <<interface>>
            +accounts: Account[]

        }
class WebApp {
            <<interface>>
            +endpoint: string
+component: JSXElement[]
+handler: (event: any) =~ void

        }
class ResponseFromDatabase {
            <<interface>>
            +users: User[]
+accounts: Account[]

        }
class HtmlTable {
            <<interface>>
            +users: User[]
+accounts: Account[]

        }
class DisplayHtmlTable {
            <<interface>>
            +users: User[]
+accounts: Account[]

        }
class FunctionHtmlTable {
            <<interface>>
            +func: (htmlTable: HtmlTable[]) =~ JSXElement

        }
WebApp<|..WebApp
User<|..User
User<|..UserWhoHasAccount
User<|..UserWhoHasAccount

/**
 * このファイルはウェブアプリケーションが
 * データベースからデータを取得し
 * データを表示するためのインターフェースを定義する
 * データの表示先はJSXElementとする
 */

export interface JSXElement {
  type: string
  props: any
  children: FunctionHtmlTable[]
}

export interface User {
  id: string
  name: string
}

export interface Account {
  id: string
  userId: string[]
  name: string
}

/**
 * AccountのuserIdとUserのidが一致する
 */
export interface UserWhoHasAccount extends User {
  accounts: Account[]
}

export interface WebApp {
  endpoint: string
  component: JSXElement[]
  handler: (event: any) => void
}

/**
 * htmlテーブルを作成して返す
 * テーブルにはユーザーの名前とアカウントの名前が表示される
 * 不足している型を追加するるため、不足している機能を一覧にする
 * - データベースからのレスポンスを受け取る機能
 * - 受け取ったレスポンスをhtmlテーブルに変換する機能
 * - htmlテーブルを表示する機能
 *
 */

// データベースからのレスポンスを受け取る機能
export interface ResponseFromDatabase {
  users: User[]
  accounts: Account[]
}

// 受け取ったレスポンスをhtmlテーブルに変換する機能
export interface HtmlTable {
  users: User[]
  accounts: Account[]
}

// htmlテーブルを表示する機能
export interface DisplayHtmlTable {
  users: User[]
  accounts: Account[]
}

// htmlテーブルを生成するためのJSXElementに追加するための関数型
export interface FunctionHtmlTable {
  func: (htmlTable: HtmlTable[]) => JSXElement
}

const functionHtmlTable: FunctionHtmlTable = {
  func: (htmlTable: HtmlTable[]): JSXElement => {
    return {
      type: 'table',
      props: {
        users: htmlTable.users,
        accounts: htmlTable.accounts,
      },
      children: [],
    }
  },
}

export class WebApp implements WebApp {
  endpoint: string
  component: JSXElement[]
  handler: (event: any) => void

  constructor(endpoint: string, component: JSXElement[], handler: (event: any) => void) {
    this.endpoint = endpoint
    this.component = component
    this.handler = handler
  }
}

export class User implements User {
  id: string
  name: string

  constructor(id: string, name: string) {
    this.id = id
    this.name = name
  }
}

import { html } from 'hono/html'
import * as I from './interfaces'

export const getAccountName = (account: I.Account): string => {
  return account.name
}

[PorcoRosso85]

-m option maybe solve. Let me ask again if any question is, thanks.

[demike]

@PorcoRosso85 did the -m option solve your problem? In that case I could close this issue