# agusmakmun/django-markdown-editor architecture

> Architecture diagram of the GitHub repository agusmakmun/django-markdown-editor, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/agusmakmun/django-markdown-editor
- Repository: https://github.com/agusmakmun/django-markdown-editor

## Overview

Martor is a Django Markdown editor: users enter Markdown in a form or admin field, edit it with the Ace-backed themed browser editor, and can preview rendered output; saved content can also be rendered through a template filter. Separate capabilities include image upload, user mentions, and Markdown enhancements such as emoji, video embeds, custom heading IDs, and HTML safety. Django views and utilities provide the server-side endpoints and rendering. The README and sampled widget and JavaScript excerpts support the main flow; unsampled endpoint internals are represented only at their known module boundary.

Main entry points: [`martor/utils.py`](https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/utils.py) (Markdown conversion), [`martor/static/martor/js/martor.bootstrap.js`](https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/static/martor/js/martor.bootstrap.js) (Editor browser), [`martor/widgets.py`](https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/widgets.py) (Editor widget), [`martor/fields.py`](https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/fields.py) (Form and model fields)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_integration["Django integration"]
  node_fields["Form and model fields<br/>[fields.py]"]
  node_model_field["Martor model field<br/>[models.py]"]
  node_admin["Admin integration<br/>[admin.py]"]
  node_widget["Editor widget<br/>[widgets.py]"]
  node_config["Editor settings<br/>[settings.py]"]
end

subgraph group_editor["Editor experience"]
  node_browser["Editor browser"]
  node_ace["Ace Markdown editor<br/>[ace.js]"]
  node_theme_semantic["Semantic theme editor<br/>[martor.semantic.js]"]
  node_theme_tailwind["Tailwind theme editor<br/>[martor.tailwind.js]"]
  node_preview["Live preview request"]
end

subgraph group_rendering["Markdown rendering"]
  node_markdownify["Markdown conversion<br/>[utils.py]"]
  node_filter["Template filter<br/>[martortags.py]"]
  node_extensions["Markdown extensions<br/>[__init__.py]"]
  node_sanitize["HTML safety<br/>[escape_html.py]"]
  node_emoji["Emoji parsing<br/>[emoji.py]"]
  node_mention["Mention parsing<br/>[mention.py]"]
  node_video["Video embeds<br/>[mdx_video.py]"]
  node_ids["Custom heading IDs<br/>[mdx_add_id.py]"]
end

subgraph group_endpoints["AJAX capabilities"]
  node_views["AJAX endpoints<br/>[views.py]"]
  node_urls["Endpoint routing<br/>[urls.py]"]
  node_api["Upload API<br/>[api.py]"]
end

node_author(("Editor user"))
node_django["Django application"]
node_external_upload["Image upload service"]
node_user_search["User search"]

node_author -->|"enters Markdown"| node_fields
node_author -->|"edits content"| node_admin
node_django -->|"uses fields"| node_fields
node_django -->|"stores Markdown field"| node_model_field
node_django -->|"registers editor"| node_admin
node_fields -->|"uses widget"| node_widget
node_model_field -->|"uses widget"| node_widget
node_admin -->|"renders editor"| node_widget
node_widget -->|"reads options"| node_config
node_widget -->|"configures editor"| node_browser
node_browser -->|"creates editor"| node_ace
node_browser -->|"requests preview"| node_preview
node_preview -->|"posts Markdown"| node_urls
node_urls -->|"routes request"| node_views
node_views -->|"converts Markdown"| node_markdownify
node_markdownify -->|"applies extensions"| node_extensions
node_markdownify -->|"sanitizes output"| node_sanitize
node_markdownify -->|"parses emoji"| node_emoji
node_markdownify -->|"parses mentions"| node_mention
node_markdownify -->|"embeds video"| node_video
node_markdownify -->|"adds IDs"| node_ids
node_filter -->|"renders Markdown"| node_markdownify
node_browser -.->|"uploads image"| node_api
node_api -.->|"sends image"| node_external_upload
node_browser -.->|"searches users"| node_views
node_theme_semantic -->|"uses editor"| node_ace
node_theme_tailwind -->|"uses editor"| node_ace

click node_fields "https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/fields.py"
click node_model_field "https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/models.py"
click node_admin "https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/admin.py"
click node_widget "https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/widgets.py"
click node_config "https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/settings.py"
click node_browser "https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/static/martor/js/martor.bootstrap.js"
click node_ace "https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/static/plugins/js/ace.js"
click node_theme_semantic "https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/static/martor/js/martor.semantic.js"
click node_theme_tailwind "https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/static/martor/js/martor.tailwind.js"
click node_preview "https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/static/martor/js/martor.bootstrap.js"
click node_views "https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/views.py"
click node_urls "https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/urls.py"
click node_api "https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/api.py"
click node_markdownify "https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/utils.py"
click node_filter "https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/templatetags/martortags.py"
click node_extensions "https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/extensions/__init__.py"
click node_sanitize "https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/extensions/escape_html.py"
click node_emoji "https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/extensions/emoji.py"
click node_mention "https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/extensions/mention.py"
click node_video "https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/extensions/mdx_video.py"
click node_ids "https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/extensions/mdx_add_id.py"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_fields,node_model_field,node_admin,node_widget,node_config,node_author,node_user_search toneBlue
class node_browser,node_ace,node_theme_semantic,node_theme_tailwind,node_preview toneAmber
class node_markdownify,node_filter,node_extensions,node_sanitize,node_emoji,node_mention,node_video,node_ids toneMint
class node_views,node_urls,node_api toneRose
class node_django,node_external_upload toneIndigo
```

## Components

### Django integration

- [Form and model fields](https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/fields.py): `martor/fields.py`
- [Martor model field](https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/models.py): `martor/models.py`
- [Admin integration](https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/admin.py): `martor/admin.py`
- [Editor widget](https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/widgets.py): `martor/widgets.py`
- [Editor settings](https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/settings.py): `martor/settings.py`

### Editor experience

- [Editor browser](https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/static/martor/js/martor.bootstrap.js): `martor/static/martor/js/martor.bootstrap.js`
- [Ace Markdown editor](https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/static/plugins/js/ace.js): `martor/static/plugins/js/ace.js`
- [Semantic theme editor](https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/static/martor/js/martor.semantic.js): `martor/static/martor/js/martor.semantic.js`
- [Tailwind theme editor](https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/static/martor/js/martor.tailwind.js): `martor/static/martor/js/martor.tailwind.js`
- [Live preview request](https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/static/martor/js/martor.bootstrap.js): `martor/static/martor/js/martor.bootstrap.js`

### Markdown rendering

- [Markdown conversion](https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/utils.py): `martor/utils.py`
- [Template filter](https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/templatetags/martortags.py): `martor/templatetags/martortags.py`
- [Markdown extensions](https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/extensions/__init__.py): `martor/extensions/__init__.py`
- [HTML safety](https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/extensions/escape_html.py): `martor/extensions/escape_html.py`
- [Emoji parsing](https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/extensions/emoji.py): `martor/extensions/emoji.py`
- [Mention parsing](https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/extensions/mention.py): `martor/extensions/mention.py`
- [Video embeds](https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/extensions/mdx_video.py): `martor/extensions/mdx_video.py`
- [Custom heading IDs](https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/extensions/mdx_add_id.py): `martor/extensions/mdx_add_id.py`

### AJAX capabilities

- [AJAX endpoints](https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/views.py): `martor/views.py`
- [Endpoint routing](https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/urls.py): `martor/urls.py`
- [Upload API](https://github.com/agusmakmun/django-markdown-editor/blob/master/martor/api.py): `martor/api.py`

### Other components

- **Editor user**
- **Django application**
- **Image upload service**
- **User search**

## Connections

- Editor user → Form and model fields: enters Markdown
- Editor user → Admin integration: edits content
- Django application → Form and model fields: uses fields
- Django application → Martor model field: stores Markdown field
- Django application → Admin integration: registers editor
- Form and model fields → Editor widget: uses widget
- Martor model field → Editor widget: uses widget
- Admin integration → Editor widget: renders editor
- Editor widget → Editor settings: reads options
- Editor widget → Editor browser: configures editor
- Editor browser → Ace Markdown editor: creates editor
- Editor browser → Live preview request: requests preview
- Live preview request → Endpoint routing: posts Markdown
- Endpoint routing → AJAX endpoints: routes request
- AJAX endpoints → Markdown conversion: converts Markdown
- Markdown conversion → Markdown extensions: applies extensions
- Markdown conversion → HTML safety: sanitizes output
- Markdown conversion → Emoji parsing: parses emoji
- Markdown conversion → Mention parsing: parses mentions
- Markdown conversion → Video embeds: embeds video
- Markdown conversion → Custom heading IDs: adds IDs
- Template filter → Markdown conversion: renders Markdown
- Editor browser → Upload API: uploads image
- Upload API → Image upload service: sends image
- Editor browser → AJAX endpoints: searches users
- Semantic theme editor → Ace Markdown editor: uses editor
- Tailwind theme editor → Ace Markdown editor: uses editor