Java 基于 Tomcat 9 与 Flexmark 实现 Markdown 中 Mermaid 图表渲染

Java 基于 Tomcat 9 与 Flexmark 实现 Markdown 中 Mermaid 图表渲染 | 极客日志

组件	版本要求	核心作用
Tomcat	9.0.x	Java Web 服务器，部署 Web 应用
Flexmark	0.64.8（兼容 0.64）	Markdown 解析渲染核心库
Mermaid.js	10.9.0	前端渲染 Mermaid 图表（流程图/关系图等）
JDK	8+	运行 Java 应用

MarkdownWeb/
├── src/
│   ├── main/
│   │   ├── java/
│   │   │   └── com/
│   │   │       └── mermaid/
│   │   │           ├── controller/
│   │   │           │   └── MarkdownController.java // 核心接口控制器
│   │   │           ├── util/
│   │   │           │   └── CsvToMermaidUtil.java // TXT→Mermaid 转换工具
│   │   │           └── config/
│   │   │               └── FlexmarkConfig.java // Flexmark 配置类
│   │   ├── resources/
│   │   └── webapp/
│   │       ├── index.html // 前端上传页面
│   │       ├── WEB-INF/
│   │       │   └── web.xml // Web 配置
│   │       └── static/
│   │           └── js/
│   │               └── mermaid.min.js // 10.9 版本 Mermaid 前端库
│   └── test/
└── pom.xml // Maven 依赖配置

<project xmlns="http://maven.apache.org/POM/4.0.0" 
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.mermaid</groupId>
    <artifactId>MarkdownWeb</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>
    <name>Mermaid Markdown Render WebApp</name>
    <properties>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
        <flexmark.version>0.64.8</flexmark.version>
        <servlet-api.version>4.0.1</servlet-api.version>
        <commons-fileupload.version>1.4</commons-fileupload.version>
    </properties>
    <dependencies>
        <!-- Servlet API（Tomcat 9 兼容） -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>${servlet-api.version}</version>
            <scope>provided</scope>
        </dependency>
        <!-- Flexmark 核心包 -->
        <dependency>
            <groupId>com.vladsch.flexmark</groupId>
            <artifactId>flexmark-all</artifactId>
            <version>${flexmark.version}</version>
        </dependency>
        <!-- 文件上传依赖 -->
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>${commons-fileupload.version}</version>
        </dependency>
        <!-- 日志（可选） -->
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-api</artifactId>
            <version>1.7.36</version>
        </dependency>
    </dependencies>
    <build>
        <finalName>MarkdownWeb</finalName>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <version>3.3.2</version>
                <configuration>
                    <failOnMissingWebXml>false</failOnMissingWebXml>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

package com.mermaid.config;

import com.vladsch.flexmark.html.HtmlRenderer;
import com.vladsch.flexmark.parser.Parser;
import com.vladsch.flexmark.util.data.MutableDataSet;

public class FlexmarkConfig {
    public static Parser getParser() {
        MutableDataSet options = new MutableDataSet();
        options.set(Parser.ENABLE_HTML_BLOCKS, true);
        options.set(Parser.ENABLE_HTML_INLINE, true);
        options.set(Parser.LINKIFY, true);
        return Parser.builder(options).build();
    }

    public static HtmlRenderer getHtmlRenderer() {
        MutableDataSet options = new MutableDataSet();
        return HtmlRenderer.builder(options).build();
    }
}

package com.mermaid.util;

import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

public class CsvToMermaidUtil {
    public static Result validateAndConvert(String fileName, String content) {
        String normalizedContent = content.replace("\r\n", "\n").replace("\r", "\n");
        String[] linesArr = normalizedContent.split("\n");
        List<String> lines = new ArrayList<>();
        for (String line : linesArr) {
            if (!line.trim().isEmpty()) {
                lines.add(line.trim());
            }
        }
        if (lines.isEmpty()) {
            return new Result(false, ".txt 文本文件格式错");
        }
        String firstLine = lines.get(0);
        if (!"source,target,weight".equals(firstLine)) {
            return new Result(false, ".txt 文本文件格式错");
        }
        StringBuilder mermaidContent = new StringBuilder("graph LR\n");
        for (int i = 1; i < lines.size(); i++) {
            String line = lines.get(i);
            String[] parts = line.split(",");
            if (parts.length < 2) continue;
            String source = parts[0].trim();
            String target = parts[1].trim();
            String weight = parts.length >= 3 ? parts[2].trim() : "";
            String sourceNode = "node_" + source;
            String targetNode = "node_" + target;
            String weightLabel = weight.isEmpty() ? "" : "|" + weight + "|";
            mermaidContent.append(" ").append(sourceNode).append("[\"").append(source).append("\"] -->")
                          .append(weightLabel).append(" ").append(targetNode).append("[\"").append(target).append("\"]\n");
        }
        String dateStr = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date());
        String finalMdContent = "# " + fileName + " 转换为 Md 关系图\n\n" +
                                "```mermaid\n" + mermaidContent.toString() + "```\n\n" +
                                "> 转换时间：" + dateStr;
        return new Result(true, finalMdContent);
    }

    public static class Result {
        private boolean valid;
        private String content;
        public Result(boolean valid, String content) { this.valid = valid; this.content = content; }
        public boolean isValid() { return valid; }
        public String getContent() { return content; }
    }
}

package com.mermaid.controller;

import com.mermaid.config.FlexmarkConfig;
import com.mermaid.util.CsvToMermaidUtil;
import com.mermaid.util.MermaidBlockParser;
import com.vladsch.flexmark.html.HtmlRenderer;
import com.vladsch.flexmark.parser.Parser;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

@WebServlet(urlPatterns = {"/", "/upload-md"})
public class MarkdownController extends HttpServlet {
    private static final Parser MARKDOWN_PARSER = FlexmarkConfig.getParser();
    private static final HtmlRenderer HTML_RENDERER = FlexmarkConfig.getHtmlRenderer();

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.getRequestDispatcher("/index.html").forward(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=UTF-8");
        PrintWriter out = resp.getWriter();
        try {
            if (!ServletFileUpload.isMultipartContent(req)) {
                out.write(buildErrorHtml("请通过文件上传表单提交！"));
                return;
            }
            DiskFileItemFactory factory = new DiskFileItemFactory();
            ServletFileUpload upload = new ServletFileUpload(factory);
            upload.setFileSizeMax(5 * 1024 * 1024);
            List<FileItem> items = upload.parseRequest(req);
            FileItem fileItem = null;
            for (FileItem item : items) {
                if (!item.isFormField() && "mdFile".equals(item.getFieldName())) {
                    fileItem = item;
                    break;
                }
            }
            if (fileItem == null) {
                out.write(buildErrorHtml("请选择要上传的文件！"));
                return;
            }
            String fileName = fileItem.getName();
            String fileExt = fileName.substring(fileName.lastIndexOf(".")).toLowerCase();
            if (!".md".equals(fileExt) && !".txt".equals(fileExt)) {
                out.write(buildErrorHtml("仅支持上传 .md 或 .txt 格式的文件！"));
                return;
            }
            String fileContent = new String(fileItem.getInputStream().readAllBytes(), "UTF-8");
            String renderContent = fileContent;
            if (".txt".equals(fileExt)) {
                CsvToMermaidUtil.Result convertResult = CsvToMermaidUtil.validateAndConvert(fileName, fileContent);
                if (!convertResult.isValid()) {
                    out.write(buildErrorHtml(convertResult.getContent()));
                    return;
                }
                renderContent = convertResult.getContent();
            }
            String rawHtml = HTML_RENDERER.render(MARKDOWN_PARSER.parse(renderContent));
            String finalHtml = MermaidBlockParser.replaceMermaidBlocks(rawHtml);
            out.write(buildFinalHtml(finalHtml));
        } catch (Exception e) {
            e.printStackTrace();
            out.write(buildErrorHtml("文件处理出错，请稍后重试！"));
        } finally {
            out.close();
        }
    }

    private String buildErrorHtml(String message) {
        return "<!DOCTYPE html><html lang='zh-CN'><head><meta charset='UTF-8'><title>处理失败</title></head>" +
               "<body><h1>处理失败</h1><p>" + message + "</p><a href='/'>返回上传页面</a></body></html>";
    }

    private String buildFinalHtml(String renderedMdHtml) {
        return "<!DOCTYPE html><html lang='zh-CN'><head>" +
               "<meta charset='UTF-8'><title>Markdown + Mermaid 渲染结果</title>" +
               "<style>body { max-width: 1200px; margin: 0 auto; padding: 20px; font-family: sans-serif; }" +
               ".mermaid { margin: 20px 0; } h1 { color: #2c3e50; }</style>" +
               "<script src='./static/js/mermaid.min.js'></script>" +
               "<script>mermaid.initialize({ startOnLoad: true, theme: 'default' });</script></head>" +
               "<body>" + renderedMdHtml + "</body></html>";
    }
}

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>Markdown + Mermaid 上传渲染工具</title>
<style>body{max-width: 800px;margin: 0 auto;padding: 50px 20px;text-align: center;}input[type="file"]{margin: 20px 0;padding: 10px;font-size: 16px;}button{background: #3498db;color: white;border: none;padding: 12px 30px;font-size: 18px;border-radius: 4px;cursor: pointer;}</style></head>
<body><h1>Markdown + Mermaid 上传渲染工具</h1><div style="border: 2px dashed #3498db;padding: 40px;border-radius: 8px;margin-top: 30px;">
<form action="/upload-md" method="post" enctype="multipart/form-data"><input type="file" name="mdFile" accept=".md,.txt" required>
<button type="submit">上传并渲染</button></form><p>支持格式：.md（直接渲染）、.txt（需符合 source,target,weight 格式）</p></div></body></html>

curl -O https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js

功能点	Node.js 实现	Java 实现
文件类型校验	multer 过滤	Servlet 判断后缀
文件大小限制	multer limits	ServletFileUpload setFileSizeMax
TXT→Mermaid 转换	解析 CSV 格式	完全相同的解析逻辑
Mermaid 渲染	markdown-it 插件	手动替换标签 + 前端渲染

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" 
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4.0.xsd" 
         version="4.0" metadata-complete="false">
    <display-name>MarkdownWeb</display-name>
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>
    <filter>
        <filter-name>CharacterEncodingFilter</filter-name>
        <filter-class>org.apache.catalina.filters.SetCharacterEncodingFilter</filter-class>
        <init-param><param-name>encoding</param-name><param-value>UTF-8</param-value></init-param>
    </filter>
    <filter-mapping><filter-name>CharacterEncodingFilter</filter-name><url-pattern>/*</url-pattern></filter-mapping>
</web-app>

Java 基于 Tomcat 9 与 Flexmark 实现 Markdown 中 Mermaid 图表渲染

Java 基于 Tomcat 9 与 Flexmark 实现 Markdown 中 Mermaid 图表渲染

一、技术栈说明

二、项目结构（Maven Web 工程）

三、核心配置与代码实现

1. Maven 依赖（pom.xml）

2. Flexmark 配置类（FlexmarkConfig.java）

3. TXT→Mermaid 转换工具（CsvToMermaidUtil.java）

4. 核心控制器（MarkdownController.java）

5. 前端上传页面（index.html）

6. Mermaid 前端库（mermaid.min.js）

四、部署与运行步骤

五、功能验证

六、关键逻辑对齐说明

七、注意事项

八、Web 配置文件配置

九、依赖调整说明（移除 flexmark-ext-mermaid）

更多推荐文章

相关免费在线工具

Java 基于 Tomcat 9 与 Flexmark 实现 Markdown 中 Mermaid 图表渲染

Java 基于 Tomcat 9 与 Flexmark 实现 Markdown 中 Mermaid 图表渲染

一、技术栈说明

二、项目结构（Maven Web 工程）

三、核心配置与代码实现

1. Maven 依赖（pom.xml）

2. Flexmark 配置类（FlexmarkConfig.java）

3. TXT→Mermaid 转换工具（CsvToMermaidUtil.java）

4. 核心控制器（MarkdownController.java）

5. 前端上传页面（index.html）

6. Mermaid 前端库（mermaid.min.js）

四、部署与运行步骤

五、功能验证

六、关键逻辑对齐说明

七、注意事项

八、Web 配置文件配置

九、依赖调整说明（移除 flexmark-ext-mermaid）

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具