Un editor Markdown en línea de front-end puro
中文 • English • 日本語 • Português • Deutsch
MarkFlow Lite es un editor Markdown de front-end puro que se ejecuta completamente en el navegador, no requiere soporte de servidor y está listo para usar, con soporte para edición en tiempo real, vista previa dual, guardado local y compartir contenido.
- ✍️ Edición en tiempo real - Soporta sintaxis Markdown estándar (incluyendo tablas, bloques de código, listas, etc.)
- 👁️ Vista previa en tiempo real - Ver mientras escribes, soporta fórmulas matemáticas y renderizado de diagramas de flujo
- 💾 Almacenamiento local - Guarda automáticamente borradores en el almacenamiento local del navegador
- 📄 Exportación de archivos - Soporta exportación a formatos PDF, HTML, Markdown
- 📂 Gestión de archivos - Soporta crear nuevos documentos, abrir archivos Markdown locales
- 🔗 Compartir contenido - Genera enlaces únicos, el contenido puede compartirse mediante parámetros URL
- 🎨 Cambio de tema - Proporciona temas oscuro/claro, adaptados a diferentes entornos de lectura
- ⌨️ Operaciones de atajo - Soporta atajos comunes (negrita, cursiva, inserción de título, etc.)
- 📱 Diseño responsivo - Soporta acceso desde escritorio, tableta y móvil
Interfaz del editor MarkFlow Lite - Funcionalidad de edición y vista previa en tiempo real
Interfaz de vista previa de MarkFlow Lite - Soporta renderizado de fórmulas matemáticas y diagramas de flujo
Tema oscuro de MarkFlow Lite - Experiencia de edición nocturna cómoda
Visita MarkFlow Lite directamente para comenzar a usarlo.
# Clonar el proyecto
git clone https://github.com/blankzsh/markflow-lite.git
# Entrar al directorio del proyecto
cd markflow-lite
# Instalar dependencias
npm install
# Iniciar el servidor de desarrollo
npm run dev
# Construir para producción
npm run build
# Previsualizar la construcción de producción
npm run preview
- Marco de desarrollo: React + TypeScript + Vite
- Análisis de Markdown: markdown-it
- Resaltado de código: Highlight.js
- Diseño de estilo: Tailwind CSS + @tailwindcss/typography
- Fórmulas matemáticas: MathJax (mediante markdown-it-mathjax3)
- Soporte de diagramas de flujo: Mermaid
- Herramienta de construcción: Vite
- Plataformas de despliegue: GitHub Pages / Vercel / Netlify
- Modo de edición - Escribe contenido Markdown en el área de edición izquierda
- Modo de vista previa - Ver el efecto renderizado en tiempo real
- Modo dividido - Ver ambas áreas de edición y vista previa simultáneamente
Ctrl + B- NegritaCtrl + I- CursivaCtrl + K- Insertar enlace
MarkFlow Lite soporta múltiples backends de almacenamiento en la nube:
- AWS S3 - Conectarse a buckets de almacenamiento S3 para gestión de archivos
- WebDAV - Conectarse a cualquier servidor habilitado para WebDAV
- Almacenamiento local - Almacenamiento local del navegador (por defecto)
A través del explorador de archivos, puedes:
- Conectar y desconectar servicios de almacenamiento en la nube
- Navegar estructuras de carpetas remotas
- Crear, editar y eliminar archivos remotos
- Sincronizar archivos locales y remotos
- Encabezados (#, ##, ###, ...)
- Estilos de texto (negrita, cursiva, tachado)
- Listas (ordenadas, desordenadas, listas de tareas)
- Enlaces e imágenes
- Bloques de código y código en línea
- Citas en bloque
- Tablas
- Reglas horizontales
- Fórmulas matemáticas (LaTeX)
- Diagramas de flujo (Mermaid)
Soporta múltiples tipos de gráficos Mermaid:
```mermaid
graph TD
A[Inicio] --> B[Proceso]
B --> C[Fin]
Tipos de gráficos soportados:
- Diagramas de flujo (Flowchart)
- Diagramas de secuencia (Sequence Diagram)
- Diagramas de Gantt (Gantt Diagram)
- Diagramas de clase (Class Diagram)
- Diagramas de estado (State Diagram)
## 📤 Funciones de exportación
- **Exportación PDF** - Exportar documentos al formato PDF
- **Exportación HTML** - Exportar a archivos HTML independientes
- **Exportación Markdown** - Exportar archivos Markdown originales
## 🐛 Problemas corregidos
### Problemas recientemente corregidos
- Corregido el problema de renderizado de diagramas de flujo demasiado grandes, optimizado el control de tamaño de gráficos
- Resuelto el problema de bloques de código ocultos por tablas
- Corregido los grandes espacios en blanco que aparecían en la parte inferior de la página después del renderizado de diagramas de flujo
- Optimizado el orden de visualización correcto de todo el contenido en la misma capa
- Eliminada la funcionalidad PWA y configuraciones relacionadas, resueltos problemas de compilación
## 🔧 Despliegue
### Desplegar en Vercel
[](https://vercel.com/)
```bash
npm run build
vercel --prod
npm run build
# Subir directorio dist a Netlify
npm run build
# Enviar directorio dist a la rama gh-pagesBienvenido a enviar Issues y Pull Requests para ayudar a mejorar MarkFlow Lite.
- Hacer fork del proyecto
- Crear una rama de función (
git checkout -b feature/AmazingFeature) - Hacer commit de los cambios (
git commit -m 'Add some AmazingFeature') - Hacer push a la rama (
git push origin feature/AmazingFeature) - Abrir un Pull Request
Este proyecto está licenciado bajo la Licencia MIT - ver el archivo LICENSE para detalles
- markdown-it - Analizador de Markdown
- Highlight.js - Resaltado de sintaxis de código
- Tailwind CSS - Marco CSS
- MathJax - Renderizado de fórmulas matemáticas
- Mermaid - Renderizado de diagramas de flujo
- Vite - Herramienta de construcción front-end
URL del proyecto: https://github.com/blankzsh/markflow-lite
Correo de retroalimentación: shell7@petalmail.com
Si tienes alguna pregunta o sugerencia, por favor envía un Issue o contacta al mantenedor del proyecto por correo electrónico. ¡Valoramos la retroalimentación de cada usuario!