Improve mermaid diagram styling and README documentation

- Update README with enhanced feature list and mermaid diagram showing how the tool works
- Add comprehensive mermaid CSS styling for dark and light modes
- Improve text visibility with font-weight and font-size adjustments
- Enhance stroke widths for better line visibility in diagrams
- Simplify mermaid initialization with proper theme detection
- Add flowchart-specific configuration for better diagram rendering

Author: mapitman

CHANGELOG.md

@@ -1,3 +1,162 @@
+1.7.0 / 2025-12-20
+==================
+
+  * Convert relative image links to base64 data URIs (markdown and HTML) (#47)
+
+1.6.4 / 2024-12-31
+==================
+
+  * Merge pull request #39 from mapitman/bug/handle-file-not-found
+  * Handle file not found error
+  * Revert "Update snap build to set version"
+
+1.6.3 / 2024-11-30
+==================
+
+  * Merge pull request #33 from mapitman/handle-permission-denied
+  * Add vscode settings
+  * Update snap build to set version
+  * Handle permission denied error a little better
+  * 1 version update (readme) (#31)
+
+1.6.2 / 2024-03-23
+==================
+
+  * Merge pull request #28 from mapitman/dependabot/go_modules/golang.org/x/text-0.3.8
+  * Bump golang.org/x/text from 0.3.2 to 0.3.8
+  * Update README.md
+
+1.6.1 / 2024-02-19
+==================
+
+  * Merge pull request #27 from mapitman/handle-inline-html
+  * Fix build
+  * Handle in-line HTML
+
+1.6.0 / 2024-02-19
+==================
+
+  * Merge pull request #25 from mapitman/update-readme
+  * Update README
+  * Merge pull request #24 from mapitman/dependabot/go_modules/golang.org/x/text-0.3.8
+  * Bump golang.org/x/text from 0.3.2 to 0.3.8
+  * Merge pull request #23 from mapitman/update-actions
+  * Update to latest versions of some github actions
+  * Merge pull request #22 from mapitman/dark-mode
+  * Update to support light/dark themes via OS setting
+  * Merge pull request #21 from mapitman/update-readme
+  * Update docs and Snap build process
+  * Add build status badge
+  * Auto-created releases will be drafts
+
+1.5.0 / 2023-09-17
+==================
+
+  * Prepare for next release
+  * Merge pull request #15 from mapitman/suppress-browser-messages
+  * Suppress stderr and stdout messages from browser
+  * Merge pull request #13 from mapitman/support-env-var-for-output
+  * Support reading an environment variable for the directory to write to
+  * Merge pull request #11 from mapitman/add-actions
+  * Add automated build and release actions
+
+1.4.1 / 2021-12-28
+==================
+
+  * Fix build with go 1.17
+  * Add info about AUR to README
+
+1.4.0 / 2020-11-08
+==================
+
+  * Add manpage to Linux tarballs
+  * Add files and config to build Debian package
+  * Write temp files into $HOME/mdview-temp when installed via snap
+  * add snap store image and link
+
+1.3.0 / 2018-11-16
+==================
+
+  * Update readme and history
+  * Add ability to render markdown file with no style applied
+  * Update Makefile to use version variable
+  * Update link to releases
+  * Update README with links to install snapd and golang
+  * trim history file
+  * Add changelog
+  * Add vscode-specific files
+  * Bump version for next release
+  * Extract HTML title from markdown
+
+1.2.0 / 2018-11-02
+==================
+
+  * Bump app version
+  * Bump snap version
+  * Merge pull request #5 from eaglersdeveloper/opening-from-file-manager
+  * Add more information to desktop file
+  * Bump snap version
+  * update gitignore
+
+1.1.0 / 2018-10-30
+==================
+
+  * Update version to 1.1
+  * Merge pull request #4 from eaglersdeveloper/opening-from-file-manager
+  * Add the ability to open from file manager
+  * Merge pull request #3 from evandandrea/fix-snap
+  * Fix snapcraft.yaml (use go1.8)
+  * update README with link to snap store
+  * Fix desktop file
+  * Add desktop file to get rid of warning when snap is built
+  * Add parts/ to gitignore
+  * Add unity7 plug so xdg-open works in snap
+  * candidate is not the correct value, should be stable
+  * switch snap to candidate
+  * Add snap badge
+  * Update so that classic confinement is not required for snap
+  * Fix make install
+  * Add gopath to go build line
+  * Fix gopath setting in makefile
+  * Add gopath
+  * Change confinement to classic
+  * update makefile to have a snap task
+  * Add go get to makefile
+  * Add golang as build dependency
+  * Update snap yaml to build the right thing
+  * Update snapcraft.yaml
+  * Create binary archive files as part of build
+  * Update README
+  * Initial commit
+
+1.0.0 / 2018-08-25
+==================
+
+  * Initial commit
+
+n.n.n / 2026-01-18
+==================
+
+  * Fix script escaping to include closing bracket and improve comments
+  * Fix CDN script loading - use NoScript option and embed mermaid.js properly
+  * Simplify embedMermaidScript and make regex more flexible
+  * Move CDN regex to package level and make it more flexible
+  * Add mermaid.min.js to repository for offline self-contained rendering
+  * Address code review feedback: improve regex check, remove dead code, fix title extraction
+  * Replace golang-commonmark with Goldmark and add Mermaid support
+  * Initial plan
+
+n.n.n / 2026-01-18
+==================
+
+  * Fix script escaping to include closing bracket and improve comments
+  * Fix CDN script loading - use NoScript option and embed mermaid.js properly
+  * Simplify embedMermaidScript and make regex more flexible
+  * Move CDN regex to package level and make it more flexible
+  * Add mermaid.min.js to repository for offline self-contained rendering
+  * Address code review feedback: improve regex check, remove dead code, fix title extraction
+  * Replace golang-commonmark with Goldmark and add Mermaid support
+  * Initial plan
 
 1.5.0 / 2023-09-17
 ==================

README.md

@@ -1,22 +1,35 @@
 # Markdown View
+![Markdown View application icon showing the letter M with a downward arrow on a white background](markdown-256.webp)
 
 [![Build](https://github.com/mapitman/mdview/actions/workflows/build.yml/badge.svg)](https://github.com/mapitman/mdview/actions/workflows/build.yml)
 
-Formats markdown and launches it in a browser.
+A lightweight command-line tool that converts markdown files to styled HTML and opens them in your default browser. Supports GitHub Flavored Markdown, Mermaid diagrams, embedded images, and automatic theme detection.
 
-## Usage
+## Features
 
-By default, `mdview` tries to use your operating system's temporary
-directory to write HTML files to. If that doesn't work for you, you can
-set an environment variable that it will use instead. For example, on
-Ubuntu Linux, Firefox is packaged as a Snap and is unable to read from
-`/tmp`. I get around this by setting `MDVIEW_DIR` like so:
+- **GitHub Flavored Markdown** - Full support for tables, task lists, strikethrough, and more
+- **Mermaid Diagrams** - Create flowcharts, sequence diagrams, state diagrams, and other visualizations directly in markdown
+- **Embedded Images** - Automatically converts relative image paths to data URIs for offline viewing
+- **Theme Detection** - HTML output conforms to your system's light or dark theme setting
+- **Typographic Enhancements** - Smart quotes, dashes, and other typographic improvements
+- **Bare HTML Option** - Generate unstyled HTML when needed
+- **Flexible Output** - Write to a temporary file or specify a custom output location
 
-```sh
-export MDVIEW_DIR=$HOME/mdview-temp
-```
 
 
+## Usage
+
+By default, `mdview` writes the generated HTML to a temporary directory.
+It tries these in order:
+- A path defined in the `MDVIEW_DIR` environment variable
+- Your operating system's temporary directory
+
+If you are on Linux and set the `TMPDIR` environment variable, that is 
+what the OS will report as the temp directory. If you set it to a 
+directory under your home directory, then browsers installed via Snap 
+(like Firefox on Ubuntu) will be able to read the generated file.
+Applications installed via Snap are unable to read from `/tmp`.
+
 ```text
 Usage:
 mdview [options] <filename>
@@ -50,7 +63,7 @@ Thanks to [sindresorhus](https://github.com/sindresorhus/github-markdown-css) fo
 
 ### Arch Linux (and derivatives)
 
-Markdown View is now available in the [AUR](https://aur.archlinux.org/packages/mdview/)
+Markdown View is available in the [AUR](https://aur.archlinux.org/packages/mdview/)
 If you have an AUR helper like `yay`, installing is as easy as:
 ```
 yay -S mdview
@@ -119,4 +132,20 @@ go get github.com/mapitman/mdview
 
 Don't have Golang? [Get it now](https://golang.org/doc/install).
 
+## How It Works
+
+```mermaid
+graph TD
+    A["📄 Markdown File"] -->|Read| B["Process Images"]
+    B -->|Convert<br/>Relative Paths<br/>to Data URIs| C["Image Processing"]
+    C --> D["Parse Markdown"]
+    D -->|GFM + Mermaid<br/>+ Typography| E["Goldmark Parser"]
+    E -->|Generate| F["HTML AST"]
+    F -->|Extract Title| G["Extract H1"]
+    F -->|Render| H["HTML Content"]
+    H -->|Embed<br/>Scripts| I["Add Mermaid.js"]
+    I -->|Apply Styles| J["Apply CSS Theme"]
+    J -->|Generate| K["HTML File"]
+    K -->|Launch| L["🌐 Browser"]
+```
 

github-markdown.css

@@ -1193,3 +1193,85 @@
 .markdown-body .markdown-alert.markdown-alert-caution .markdown-alert-title {
   color: var(--color-danger-fg);
 }
+
+/* Mermaid diagram styling for better visibility */
+.mermaid text,
+.mermaid tspan {
+  font-weight: 500 !important;
+  font-size: 13px !important;
+}
+
+.mermaid .label text {
+  font-weight: 600 !important;
+  font-size: 13px !important;
+}
+
+.mermaid .edgeLabel text {
+  font-weight: 500 !important;
+}
+
+@media (prefers-color-scheme: dark) {
+  .mermaid {
+    background-color: transparent;
+  }
+  
+  .mermaid text,
+  .mermaid tspan,
+  .mermaid .label text,
+  .mermaid .edgeLabel text {
+    fill: #e6edf3 !important;
+  }
+  
+  .mermaid .node rect,
+  .mermaid .node circle,
+  .mermaid .node ellipse,
+  .mermaid .node polygon,
+  .mermaid .node path {
+    stroke: #58a6ff !important;
+    stroke-width: 2px !important;
+    fill: #0d1117 !important;
+  }
+  
+  .mermaid .edgeLabel {
+    background-color: #0d1117;
+  }
+  
+  .mermaid line,
+  .mermaid path {
+    stroke: #58a6ff !important;
+    stroke-width: 2px !important;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  .mermaid {
+    background-color: transparent;
+  }
+  
+  .mermaid text,
+  .mermaid tspan,
+  .mermaid .label text,
+  .mermaid .edgeLabel text {
+    fill: #1F2328 !important;
+  }
+  
+  .mermaid .node rect,
+  .mermaid .node circle,
+  .mermaid .node ellipse,
+  .mermaid .node polygon,
+  .mermaid .node path {
+    stroke: #0550ae !important;
+    stroke-width: 2px !important;
+    fill: #ffffff !important;
+  }
+  
+  .mermaid .edgeLabel {
+    background-color: #ffffff;
+  }
+  
+  .mermaid line,
+  .mermaid path {
+    stroke: #0550ae !important;
+    stroke-width: 2px !important;
+  }
+}

main.go

@@ -3,8 +3,8 @@ package main
 import (
 	"bytes"
 	"crypto/rand"
-	"encoding/base64"
 	_ "embed"
+	"encoding/base64"
 	"encoding/hex"
 	"errors"
 	"flag"
@@ -411,7 +411,21 @@ func embedMermaidScript(htmlContent string) string {
 	escapedMermaidJS := strings.ReplaceAll(mermaidJS, "</script>", "<\\/script>")
 
 	// Add the embedded Mermaid.js and initialization at the end of the content
-	inlineScript := fmt.Sprintf("<script>%s</script><script>mermaid.initialize({startOnLoad: true});</script>", escapedMermaidJS)
+	// Initialize mermaid with theme detection
+	initScript := `
+    var isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    mermaid.initialize({
+      startOnLoad: true,
+      theme: isDarkMode ? 'dark' : 'default',
+      flowchart: {
+        useMaxWidth: true,
+        htmlLabels: true,
+        curve: 'linear'
+      },
+      securityLevel: 'loose'
+    });
+  `
+	inlineScript := fmt.Sprintf("<script>%s</script><script>%s</script>", escapedMermaidJS, initScript)
 
 	return htmlContent + inlineScript
 }