Add ER diagram svg image on html document

- add ER diagram svg image on html document
- enhance output format pdf, image: temporary file name using uuid format

Author: imjuni

.eslintrc.cjs

@@ -88,6 +88,8 @@ module.exports = {
     {
       files: ['src/creators/writeToImage.ts'],
       rules: {
+        '@typescript-eslint/no-unsafe-argument': ['off'],
+        '@typescript-eslint/no-unsafe-return': ['off'],
         '@typescript-eslint/no-unsafe-assignment': ['off'],
         '@typescript-eslint/no-unsafe-member-access': ['off'],
         '@typescript-eslint/no-unsafe-call': ['off'],

src/cli/commands/buildDocumentCommandHandler.ts

@@ -1,5 +1,6 @@
 import getDatabaseName from '#common/getDatabaseName';
 import getMetadata from '#common/getMetadata';
+import { CE_MERMAID_THEME } from '#configs/const-enum/CE_MERMAID_THEME';
 import { CE_OUTPUT_FORMAT } from '#configs/const-enum/CE_OUTPUT_FORMAT';
 import type IBuildCommandOption from '#configs/interfaces/IBuildCommandOption';
 import createHtml from '#creators/createHtml';
@@ -33,6 +34,8 @@ export default async function buildDocumentCommandHandler(option: IBuildCommandO
   let localDataSource: DataSource | undefined;
 
   try {
+    consola.info(`connection initialize: "${chalk.yellowBright(`${option.dataSourcePath}`)}"`);
+
     const dataSource = await getDataSource(option);
     await dataSource.initialize();
 
@@ -45,10 +48,11 @@ export default async function buildDocumentCommandHandler(option: IBuildCommandO
 
     const metadata = await getMetadata(dataSource, option);
 
-    consola.info(`connection initialize: "${chalk.yellowBright(`${option.dataSourcePath}`)}"`);
-    consola.info(`extract entities in ${getDatabaseName(dataSource.options)}`);
+    consola.success('connection initialized');
     consola.info(`version: ${metadata.version}`);
 
+    consola.info(`extract entities in ${getDatabaseName(dataSource.options)}`);
+
     const entities = getEntityRecords(dataSource, metadata);
     const columns = dataSource.entityMetadatas
       .map((entity) => entity.columns.map((column) => getColumnRecord(column, option, metadata)))
@@ -69,6 +73,10 @@ export default async function buildDocumentCommandHandler(option: IBuildCommandO
 
     const dedupedRelations = dedupeManaToManyRelationRecord(passRelations);
     const records = [...entities, ...columns, ...dedupedRelations];
+
+    consola.success('complete extraction');
+    consola.info('Database open and processing');
+
     const db = await openDatabase(option);
     const processedDb = await processDatabase(metadata, db, option);
     const compared = compareDatabase(metadata, records, processedDb.prev);
@@ -77,12 +85,23 @@ export default async function buildDocumentCommandHandler(option: IBuildCommandO
     const renderData = await getRenderData(nextDb, metadata, option);
 
     await flushDatabase(option, nextDb);
+    consola.success('Database open and processing completed');
 
     consola.info(`output format: ${option.format}`);
 
     if (option.format === CE_OUTPUT_FORMAT.HTML) {
+      const imageOption: IBuildCommandOption = {
+        ...option,
+        format: CE_OUTPUT_FORMAT.IMAGE,
+        imageFormat: 'svg',
+        theme: CE_MERMAID_THEME.DARK,
+      };
       const documents = await createHtml(option, renderData);
+      const imageDocument = await createImageHtml(imageOption, renderData);
+
+      await writeToImage(imageDocument, imageOption, renderData);
       await Promise.all(documents.map((document) => fs.promises.writeFile(document.filename, document.content)));
+
       return documents.map((document) => document.filename);
     }
 

src/configs/interfaces/IDocumentOption.ts

@@ -1,3 +1,4 @@
+import type { CE_MERMAID_THEME } from '#configs/const-enum/CE_MERMAID_THEME';
 import type { CE_OUTPUT_COMPONENT } from '#configs/const-enum/CE_OUTPUT_COMPONENT';
 import type { CE_OUTPUT_FORMAT } from '#configs/const-enum/CE_OUTPUT_FORMAT';
 import type { CE_PROJECT_NAME_FROM } from '#configs/const-enum/CE_PROJECT_NAME_FROM';
@@ -41,5 +42,5 @@ export default interface IDocumentOption extends ICommonOption {
    *
    * @url https://mermaid-js.github.io/mermaid/#/Setup?id=theme
    * */
-  theme: 'default' | 'forest' | 'dark' | 'neutral';
+  theme: CE_MERMAID_THEME;
 }

src/creators/createImageHtml.ts

@@ -1,11 +1,11 @@
-import { CE_DEFAULT_VALUE } from '#configs/const-enum/CE_DEFAULT_VALUE';
 import type IBuildCommandOption from '#configs/interfaces/IBuildCommandOption';
 import applyPrettier from '#creators/applyPretter';
 import type getRenderData from '#creators/getRenderData';
 import type IErdiaDocument from '#creators/interfaces/IErdiaDocument';
 import { CE_TEMPLATE_NAME } from '#template/cosnt-enum/CE_TEMPLATE_NAME';
 import evaluateTemplate from '#template/evaluateTemplate';
 import { getDirname } from 'my-node-fp';
+import { randomUUID } from 'node:crypto';
 import path from 'path';
 import type { AsyncReturnType } from 'type-fest';
 
@@ -16,7 +16,7 @@ export default async function createImageHtml(
   const rawHtml = await evaluateTemplate(CE_TEMPLATE_NAME.IMAGE_DOCUMENT, renderData);
   const prettiedHtml = await applyPrettier(rawHtml, 'html');
   const outputDir = await getDirname(option.output ?? process.cwd());
-  const tempFileName = path.join(outputDir, CE_DEFAULT_VALUE.HTML_INDEX_FILENAME);
+  const tempFileName = path.join(outputDir, `${randomUUID()}.html`);
 
   return {
     dirname: path.resolve(outputDir),

src/creators/createPdfHtml.ts

@@ -1,11 +1,11 @@
-import { CE_DEFAULT_VALUE } from '#configs/const-enum/CE_DEFAULT_VALUE';
 import type IBuildCommandOption from '#configs/interfaces/IBuildCommandOption';
 import applyPrettier from '#creators/applyPretter';
 import type getRenderData from '#creators/getRenderData';
 import type IErdiaDocument from '#creators/interfaces/IErdiaDocument';
 import { CE_TEMPLATE_NAME } from '#template/cosnt-enum/CE_TEMPLATE_NAME';
 import evaluateTemplate from '#template/evaluateTemplate';
 import { getDirname } from 'my-node-fp';
+import { randomUUID } from 'node:crypto';
 import path from 'path';
 import type { AsyncReturnType } from 'type-fest';
 
@@ -16,7 +16,7 @@ export default async function createPdfHtml(
   const rawHtml = await evaluateTemplate(CE_TEMPLATE_NAME.PDF_DOCUMENT, renderData);
   const prettiedHtml = await applyPrettier(rawHtml, 'html');
   const outputDir = await getDirname(option.output ?? process.cwd());
-  const tempFileName = path.join(outputDir, CE_DEFAULT_VALUE.HTML_INDEX_FILENAME);
+  const tempFileName = path.join(outputDir, `${randomUUID()}.html`);
 
   return {
     dirname: path.resolve(outputDir),

src/template/html/mermaid.ts

@@ -54,11 +54,23 @@ const mermaid = `<!DOCTYPE html>
         <a class="anchor-link" href="#entity-relationship-mermiad-diagram" aria-label="Link to this section: Entity Relationship Diagram">#</a>
       </h2>
 
+      <h3 class="title is-4">Diagram</h3>
       <pre class="mermaid">
       <% versions.filter((version) => version.latest).forEach((version) => { -%>
       <%- include('${CE_TEMPLATE_NAME.MERMAID_DOCUMENT}', { entities: version.entities, option, metadata }); %>
       <% }) -%>
       </pre>
+
+      <h3 class="title is-4">
+        <a class="anchor-link" href="/<%= metadata.name %>.svg" target="_blank" aria-label="Link to this section: Entity Relationship Diagram Image">Image</a>
+      </h3>
+    </section>
+
+    <section>
+      <h2 id="entity-relationship-mermiad-diagram" class="title is-3">
+        ER Diagram Link
+        <a class="anchor-link" href="/<%= metadata.name %>.svg" aria-label="Link to this section: Entity Relationship Diagram">#</a>
+      </h2>
     </section>
 
     <div class="mx-auto p-2" style="width: 100%;"></div>