diff --git a/src/components/EditorHeader/ControlPanel.jsx b/src/components/EditorHeader/ControlPanel.jsx index d4bcbee..f1b09f0 100644 --- a/src/components/EditorHeader/ControlPanel.jsx +++ b/src/components/EditorHeader/ControlPanel.jsx @@ -29,7 +29,6 @@ import { jsonToSQLite, jsonToMariaDB, jsonToSQLServer, - jsonToMermaid, } from "../../utils/exportSQL/generic"; import { ObjectType, @@ -68,6 +67,7 @@ import Modal from "./Modal/Modal"; import { useTranslation } from "react-i18next"; import { exportSQL } from "../../utils/exportSQL"; import { databases } from "../../data/databases"; +import { jsonToMermaid } from "../../utils/exportAs/mermaid"; export default function ControlPanel({ diagramId, @@ -1052,7 +1052,6 @@ export default function ControlPanel({ database: database, title: title, }); - // generate .md file setExportData((prev) => ({ ...prev, data: result, diff --git a/src/pages/LandingPage.jsx b/src/pages/LandingPage.jsx index 46c7f1d..aa33036 100644 --- a/src/pages/LandingPage.jsx +++ b/src/pages/LandingPage.jsx @@ -287,11 +287,10 @@ const features = [ footer: "", }, { - title: "Import", + title: "Reverse engineer", content: (
- Already have a diagram? Import a DDL script, or a JSON file to generate - or a diagram. + Already have a schema? Import a DDL script to generate a diagram.
), footer: "", diff --git a/src/utils/exportAs/mermaid.js b/src/utils/exportAs/mermaid.js new file mode 100644 index 0000000..0467776 --- /dev/null +++ b/src/utils/exportAs/mermaid.js @@ -0,0 +1,47 @@ +import { dbToTypes } from "../../data/datatypes"; + +export function jsonToMermaid(obj) { + function getMermaidRelationship(relationship) { + switch (relationship) { + case "One to one": + return "||--||"; + case "One to many": + return "||--o{"; + case "Many to one": + return "}o--||"; + default: + return "--"; + } + } + + const mermaidEntities = obj.tables + .map((table) => { + const fields = table.fields + .map((field) => { + const fieldType = + field.type + + ((dbToTypes[obj.database][field.type].isSized || + dbToTypes[obj.database][field.type].hasPrecision) && + field.size && + field.size !== "" + ? "(" + field.size + ")" + : ""); + return `\t\t${fieldType} ${field.name}`; + }) + .join("\n"); + return `\t${table.name} {\n${fields}\n\t}`; + }) + .join("\n\n"); + + const mermaidRelationships = obj.relationships?.length + ? obj.relationships + .map((r) => { + const startTable = obj.tables[r.startTableId].name; + const endTable = obj.tables[r.endTableId].name; + return `\t${startTable} ${getMermaidRelationship(r.cardinality)} ${endTable} : references`; + }) + .join("\n") + : ""; + + return `erDiagram\n${mermaidRelationships ? `${mermaidRelationships}\n\n` : ""}${mermaidEntities}`; +} diff --git a/src/utils/exportSQL/generic.js b/src/utils/exportSQL/generic.js index 7a44b67..8aa2a04 100644 --- a/src/utils/exportSQL/generic.js +++ b/src/utils/exportSQL/generic.js @@ -502,41 +502,3 @@ export function jsonToSQLServer(obj) { ) .join("\n")}`; } - -export function jsonToMermaid(obj) { - function getMermaidRelationship(relationship) { - switch (relationship) { - case "One to one": - return "||--||"; - case "One to many": - return "||--o{"; - case "Many to one": - return "}o--||"; - default: - return "--"; - } - } - const mermaidEntities = obj.tables - .map((table) => { - const fields = table.fields - .map((field) => { - const fieldType = getTypeString(field, obj.database, "mssql"); - return ` ${fieldType} ${field.name}`; - }) - .join("\n"); - return ` ${table.name} {\n${fields}\n }`; - }) - .join("\n\n"); - - const mermaidRelationships = obj.relationships?.length - ? obj.relationships - .map((r) => { - const startTable = obj.tables[r.startTableId].name; - const endTable = obj.tables[r.endTableId].name; - return ` ${startTable} ${getMermaidRelationship(r.cardinality)} ${endTable} : references`; - }) - .join("\n") - : ""; - - return `erDiagram\n${mermaidRelationships ? `${mermaidRelationships}\n\n` : ""}${mermaidEntities}`; -} diff --git a/src/utils/modalTitles.js b/src/utils/modalTitles.js index 2887aae..168f9d3 100644 --- a/src/utils/modalTitles.js +++ b/src/utils/modalTitles.js @@ -4,8 +4,9 @@ import i18n from "../i18n/i18n"; export const getModalTitle = (modal) => { switch (modal) { case MODAL.IMPORT: - case MODAL.IMPORT_SRC: return i18n.t("import_diagram"); + case MODAL.IMPORT_SRC: + return i18n.t("import_from_source"); case MODAL.CODE: return i18n.t("export"); case MODAL.IMG: